`col-xs- *` не работает в Bootstrap 4

Я не сталкивался с этим раньше, и мне очень сложно найти решение. При наличии столбца, равного среднему в бутстрапе, например:

<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>

Текстовое выравнивание отлично работает:

Но при том, что столбец будет таким же маленьким, как:

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

Затем текст-align больше не работает:

Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как я думаю. У меня никогда не было этой проблемы, так как мой текст всегда сопоставлялся в прошлом с xs. Любая помощь будет принята с благодарностью. Вот мой полный код:

<!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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; return false;" 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>

Ответ 1

col-xs-* были сброшены в Bootstrap 4 в пользу col-*.

Замените col-xs-12 на col-12, и он будет работать как ожидалось.

Также обратите внимание, что col-xs-offset-{n} были заменены на offset-{n} в v4.

Ответ 2

Мне просто интересно, почему col-xs-6 не работает для меня, но потом я нашел ответ в документации по Bootstrap 4. Префикс класса для очень маленьких устройств теперь col-, тогда как в предыдущих версиях он был col-xs.

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

Bootstrap 4 отбросил все классы col-xs-*, поэтому используйте вместо него col-*. Например, col-xs-6 заменяется на col-6.

Ответ 3

Вы можете сделать это, если хотите использовать старый синтаксис (или не хотите переписывать каждый шаблон)

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