`col-xs- *` не працює в Bootstrap 4

169

Я раніше не стикався з цим, і мені дуже важко намагатися знайти рішення. Коли у завантажувальному рядку є стовпець, рівний середньому:

<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

436

col-xs-*були скинуті в Bootstrap 4 на користь col-*.

Замінити col-xs-12з , col-12і він буде працювати , як очікувалося.

Також примітка col-xs-offset-{n}була замінена на offset-{n}v4.

— дао
джерело

8

Ніколи навіть не думав би про це! Дуже дякую.

— YoungCoder

12

Завжди перевіряйте документи . Щасливого кодування! ::} <(((*> ::

— дао

8

Ви зазвичай не перевіряєте документи. Я був у всіх документах і пропустив і це. Я думав, що протягом двох міграцій bs4-сайтів зараз, що Col призначене для загальних, і col-xs буде специфічним, однак в огляді це не має сенсу, тому що, будучи спочатку мобільним, xs і вище - це загальне (за замовчуванням). Дякую за нагадування, я думаю, що я скупив це під час моєї останньої міграції, але затримався на цьому на цій.

— блам

1

Одна справа, хоча Андрій; це просто "xs", що скинуто, чи є й інші?

— Funk Forty Niner

2

Будь ласка, прочитайте цю відповідь про те, що змінилося між v3 та v4 .), А також посилання на інструмент, якщо ви вирішите піти цим шляхом. Це непросте завдання, і IMHO легше працювати над чистим шаблоном і просто вставити 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- {значення} замінюється на col- {значення}

Зміни в sm, md, lg, xl не змінюються .

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

— Дорджі Карма
джерело

-1

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>

— bharti parmar
джерело

col-xs скинуто в Bootstrap 4

— Wariored

будь ласка, подивіться на це посилання: bitdegree.org/learn/… *% 20in% 20your% 20code.

— bharti parmar