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

170

Je n'ai jamais rencontré cela auparavant et j'ai beaucoup de mal à essayer de trouver la solution. Lorsque vous avez une colonne égale à moyenne 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>

Le text-align fonctionne bien:

Mais lorsque vous rendez la colonne égale à très 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 de texte ne fonctionne plus:

Y a-t-il un concept de bootstrap que je ne comprends pas ou est-ce en fait une erreur comme je pense. Je n'ai jamais eu ce problème, car mon texte s'est toujours 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>

— YoungCoder
source

7

col-xs-*n'existe plus dans la dernière version v4, c'est pourquoi vous voyez cela. Le col-xs-12n'a pas un ensemble de largeur de 100% comme le vôtre col-md-12. Vérifiez DevTools pour tout voir et voir ce Pull

— vanburen

438

col-xs-*ont été abandonnés dans Bootstrap 4 au profit de col-*.

Remplacez-le col-xs-12par col-12et cela fonctionnera comme prévu.

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

— tao
source

8

Jamais même pensé / connu de cela! Merci beaucoup.

— YoungCoder

12

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

— tao

8

Ce n'est pas quelque chose que vous vérifieriez normalement dans les documents. J'étais partout dans la documentation et j'ai raté ça aussi. J'avais pensé, sur deux migrations de sites bs4 maintenant, que col était pour générique, et col-xs serait spécifique, mais avec le recul cela n'a aucun sens, car étant mobile d'abord, 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 celui-ci.

— blamb le

1

Une chose cependant Andrei; est-ce juste "xs" qui a été abandonné, ou y en a-t-il d'autres également?

— Funk Forty Niner

2

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

— tao

21

Je me suis simplement demandé pourquoi col-xs-6cela ne fonctionnait pas pour moi, mais j'ai trouvé la réponse dans la documentation Bootstrap 4. Le préfixe de classe pour les appareils très petits est maintenant col-alors qu'il était dans les versions précédentes col-xs.

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

Bootstrap 4 a supprimé toutes les col-xs-*classes, utilisez-les à la col-*place. Par exemple col-xs-6remplacé par col-6.

— Sabir Hussain
source

2

vous pouvez le faire, si vous souhaitez 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);
    }
  }
}

— Wiwolavida
source

2

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

— SMWalker
source

1

Dans Bootstrap 4.3 , col-xs- {value} est remplacé par col- {value}

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}

— Dorjee Karma
source

-2

Classe Bootstrap 4 Grid col-xs- *.

Dans bootstrap, 4 classes de grille sont différentes pour une vue différente ou pour la même chose.

Si vous souhaitez utiliser la classe .col-xs- *.

Donc, cette classe fonctionne pour la vue mobile.

Pour voir la différence, vous pouvez essayer ce code ci-dessous et voir la différence. Ensuite, utilisez cette classe dans votre code.

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— bharti parmar
source

col-xs est abandonné dans Bootstrap 4

— Wariored le

s'il vous plaît, jetez un œil sur le lien: bitdegree.org/learn / ... *% 20in% 20your% 20code.

— bharti parmar le

col-xs est supprimé dans Bootstrap 4. Une alternative pour cela est d'utiliser col-12 (ne pas ajouter xs).

— Chandan YS