`col-xs-*` ne fonctionne pas dans Bootstrap 4

Question

`col-xs-*` ne fonctionne pas dans Bootstrap 4

Demandé el 22 de Janvier, 2017: Quand la question a-t-elle été
54583 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'ai jamais rencontré ce problème auparavant, et j'ai beaucoup de mal à trouver la solution. Lorsque l'on a une colonne égale à medium dans bootstrap comme ceci :

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

L'alignement du texte fonctionne bien :

Mais en rendant la colonne égale à extra petite comme ceci :

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

Ensuite, l'alignement du texte ne fonctionne plus :

Y a-t-il un concept de bootstrap que je ne comprends pas ou s'agit-il en fait d'une erreur comme je le pense ? Je n'ai jamais eu ce problème, car mon texte a toujours été aligné dans le passé avec xs. Toute aide serait grandement appréciée. Voici mon code complet :

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

Demandé el 22 de Janvier, 2017 par YoungCoder

7 votes

col-xs-* n'existe plus dans la dernière version v4, c'est pourquoi vous voyez ceci. Le site col-xs-12 n'a pas une largeur fixée à 100% comme votre col-md-12 . Vérifiez DevTools pour tout voir et voyez ceci Tirer

Commenté el 22 de Janvier, 2017 par vanburen

Answer 1

5 Réponses

Answer 2

545voto

Andrei Gheorghiu Points 3898

col-xs-* ont été abandonnés dans Bootstrap 4 en faveur de col-* .

Remplacer col-xs-12 avec col-12 et cela fonctionnera comme prévu.

Notez également col-xs-offset-{n} ont été remplacés par offset-{n} dans la v4.

Répondu el 22 de Janvier, 2017 par Andrei Gheorghiu (3898 Points )

14 votes

Vérifiez toujours docs . Bon codage ! : : }<(((*> : :

Commenté el 22 de Janvier, 2017 par Andrei Gheorghiu

10 votes

Ce n'est pas quelque chose que l'on recherche normalement dans la documentation. J'ai vérifié tous les documents et j'ai manqué ça aussi. J'avais pensé, après deux migrations de sites bs4 maintenant, que col était pour le générique, et col-xs serait spécifique, cependant avec le recul cela n'a aucun sens, car étant mobile first, xs et plus est générique (par défaut). Merci pour le rappel, je pense que j'ai survolé cela lors de ma dernière migration, mais j'étais bloqué sur ce point lors de celle-ci.

Commenté el 28 de Juin, 2017 par Brian Thomas

3 votes

Veuillez lire cette réponse sur ce qui a changé entre v3 et v4 ) et aussi un lien vers un outil, si vous décidez de suivre cette voie. Ce n'est pas une tâche facile et, à mon avis, il est plus facile de travailler sur un modèle propre et d'insérer simplement le php que de modifier le balisage.

Commenté el 3 de Août, 2018 par Andrei Gheorghiu

Afficher 6 autres commentaires

Answer 3

25voto

Sabir Hussain Points 749

Je me demandais juste, pourquoi col-xs-6 n'a pas fonctionné pour moi mais j'ai trouvé la réponse dans la documentation de Bootstrap 4. Le préfixe de la classe pour les très petits appareils est maintenant col- alors que dans les versions précédentes, il était col-xs .

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootstrap 4 a tout laissé tomber col-xs-* donc utiliser col-* à la place. Par exemple col-xs-6 remplacé par col-6 .

Répondu el 25 de Mai, 2017 par Sabir Hussain (749 Points )

Answer 4

12voto

SMWalker Points 71

Ils ont abandonné XS parce que Bootstrap est considéré comme un outil de développement " mobile-first ". Sa valeur par défaut est considérée comme xs et n'a donc pas besoin d'être définie.

Répondu el 30 de Mars, 2020 par SMWalker (71 Points )

0 votes

Ils auraient pu l'ajouter comme alternative au lieu de l'abandonner. Il semble qu'ils doivent certainement garantir une compatibilité brisée entre différentes versions et ils y sont parvenus.

Commenté el 12 de Septembre, 2021 par Andrew

Answer 5

5voto

Dorjee Karma Points 139

Sur Bootstrap 4.3 , col-xs-{valeur} est remplacé par col-{valeur}.

Il n'y a pas de changement dans sm, md, lg, xl reste le même.

.col-{valeur}
.col-sm-{valeur}
.col-md-{valeur}
.col-lg-{valeur}
.col-xl-{valeur}

Répondu el 14 de Mars, 2020 par Dorjee Karma (139 Points )

Answer 6

2voto

wiwolavida Points 51

Vous pouvez faire ceci, si vous voulez utiliser l'ancienne syntaxe (ou si vous ne voulez pas réécrire chaque modèle)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

Répondu el 8 de Octobre, 2019 par wiwolavida (51 Points )

`col-xs-*` ne fonctionne pas dans Bootstrap 4

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

`col-xs-*` ne fonctionne pas dans Bootstrap 4

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: