web-dev-qa-db-fra.com

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

Je n'ai jamais rencontré cela auparavant et j'ai beaucoup de difficulté à essayer de trouver la solution. Quand avoir 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>

Text-align fonctionne très bien: enter image description here

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

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

Alors le text-align ne fonctionne plus: enter image description here

Existe-t-il un concept bootstrap que je ne comprends pas ou s'agit-il en fait d'une erreur comme celle que je pense? Je n'ai jamais eu ce problème, car mon texte s'est toujours aligné sur xs dans le passé. 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>
htmlcsstwitter-bootstraptwitter-bootstrap-4text-alignment
120
YoungCoder

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

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

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

329
Andrei Gheorghiu

Je me demandais simplement pourquoi _col-xs-6_ ne fonctionnait pas pour moi mais j'ai trouvé la réponse dans la documentation Bootstrap 4. Le préfixe de classe pour les très petits périphériques 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 supprimé toutes les classes _col-xs-*_, utilisez donc _col-*_ à la place. Par exemple, _col-xs-6_ remplacé par _col-6_.

20
Sabir Hussain