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

170

Я не сталкивался с этим раньше, и мне очень трудно найти решение. Если в начальной загрузке есть столбец, равный medium:

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

Тогда выравнивание текста больше не работает:

Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как мне кажется. У меня никогда не было этой проблемы, так как мой текст всегда выравнивался в прошлом с 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="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
источник

7

col-xs-*больше не существует в последней версии v4, поэтому вы видите это. col-xs-12Не имеет ширину набора 100% , как ваш col-md-12. Проверьте DevTools, чтобы увидеть все и увидеть это Pull

— vanburen

438

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

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

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

— дао
источник

8

Никогда даже не думал / знал об этом! Огромное спасибо.

— YoungCoder

12

Всегда проверяйте документы . Удачного кодирования! ::} <(((*> ::

— дао

8

Это не то, что вы обычно проверяли бы документы. Я был во всех документах и пропустил это тоже. Я думал, что в течение двух миграций сайта bs4 сейчас col был для generic, а col-xs был бы конкретным, однако в ретроспективе это не имеет смысла, потому что мобильность в первую очередь, xs и up является общей (по умолчанию). Спасибо за напоминание, я думаю, что просмотрел это во время моей последней миграции, но застрял на этом.

— Буб

1

Одна вещь, хотя Андрей; это просто "хз", которые были отброшены, или есть и другие?

— Funk Forty Niner

2

Пожалуйста, прочитайте этот ответ о том, что изменилось между v3 и v4 .), А также ссылку на инструмент, если вы решите пойти по этому пути. Это непростая задача, и имхо проще работать с чистым шаблоном и просто вставить php, чем менять разметку.

— Дао

21

Я просто удивился, почему 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.

— Сабир Хуссейн
источник

2

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

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

— wiwolavida
источник

2

Они отказались от XS, потому что Bootstrap считается мобильным инструментом разработки. По умолчанию это xs, поэтому его не нужно определять.

— SMWalker
источник

1

В Bootstrap 4.3 col-xs- {value} заменяется на col- {value}

Нет изменений в sm, md, lg, xl, остается неизменным.

.col- {значение}
.col-sm- {значение}
.col-md- {значение}
.col-lg- {значение}
.col-xl- {значение}

— Дорджи Карма
источник

-2

Bootstrap 4 Grid col-xs- * класс.

В начальной загрузке 4 класса сетки различны для разных видов или для одного и того же.

Если вы хотите использовать класс .col-xs- *.

Итак, этот класс работает для мобильного просмотра.

Чтобы увидеть разницу вы можете попробовать этот код ниже и увидеть разницу. Затем используйте этот класс в своем коде.

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

— бхарти пармар
источник

Col-хз отбрасывается в Bootstrap 4

— Wariored

пожалуйста, посмотрите на эту ссылку: bitdegree.org/learn/… *% 20in% 20your% 20code.

— Бхарти Пармар

col-xs удален в Bootstrap 4. Альтернативой для этого является использование col-12 (не добавлять xs).

— Чандан YS