Bootstrap 3 против Bootstrap 4

Question

В ходе интервью мне задали следующие вопросы:

В чем заключалась проблема с сеткой начальной загрузки 3, которая была исправлена ​​в начальной загрузке 4, и я не нашел ответа в этот раз, и ямного искал и не нашел хорошего ответа, но, как я знаю, у начальной загрузки 3 есть col-sm, col-md, col-xl, как показано ниже:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div> 

Но когда мне задали этот вопрос, я получилполностью сбит с толку, поэтому, пожалуйста, кто-то может помочь мне разобраться в них в деталях?

Answer 1

Сетка

• Перемещено во flexbox.
  1. Добавлена ​​поддержка flexbox в сеточных миксинах и предопределенных классах.
  2. В состав flexbox включена поддержка классов вертикального и горизонтального выравнивания.
• Обновлены имена классов сетки и новый уровень сетки.
  1. Добавлен новый уровень сетки sm ниже 768px для более детального контроля.Теперь у нас есть xs, sm, md, lg и xl.Это также означает, что каждый уровень был увеличен на один уровень (поэтому .col-md-6 в v3 теперь является .col-lg-6 в v4).
  2. xs классы сетки были изменены, чтобы не требовать инфиксчтобы более точно представить, что они начинают применять стили с минимальной шириной: 0, а не с заданным значением пикселя.Вместо .col-xs-6 теперь это .col-6.Все остальные уровни сетки требуют инфикса (например, sm).
• Обновлены размеры сетки, миксины и переменные.
  1. Сетка желобов теперь имеет карту Sass, так что вы можете указывать определенную ширину желоба в каждой точке прерывания.
  2. Обновлены сеточные миксины, чтобы использовать готовый миксин, готовый к изготовлению, и готовый к употреблению сборочный комплект.гибкость и максимальная ширина для определения размера отдельных столбцов.
  3. Изменены точки останова медиа-запросов системы сетки и ширины контейнеров для учета нового уровня сетки и обеспечения равномерного деления столбцов на 12 при максимальной ширине.
  4. Точки останова сетки и ширина контейнера теперь обрабатываются с помощью карт Sass ($ grid-breakpoints и $ container-max-widths) вместо нескольких отдельных переменных.Они полностью заменяют переменные @ screen- * и позволяют полностью настраивать уровни сетки.
  5. Также изменились медиазапросы.Вместо того, чтобы повторять наши объявления медиа-запросов с одним и тем же значением каждый раз, теперь у нас есть @include media-breakpoint-up / down / only.Теперь вместо записи @media (min-width: @ screen-sm-min) {...} вы можете написать @include media-breakpoint-up (sm) {...}.

Answer 2

в начальной загрузке 3 вы должны установить номер после sm как col-sm-3, если вы не установите номер, он принимает всю строку как col-sm-12

см. Документацию

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="background-color:lavender;">.col-sm</div>
    <div class="col-sm" style="background-color:lavenderblush;">.col-sm-</div>
    <div class="col-sm" style="background-color:lavender;">.col-sm</div>
  </div>
</div>

В начальной загрузке 4 она становится 4, если вы используете col-sm

см. Документацию

Благодаря flexbox столбцы сетки без указанной ширины будут автоматически размещаться как столбцы равной ширины.Например, четыре экземпляра .col-sm будут автоматически шириной 25% от маленькой точки останова и выше.См. столбцы автоматической разметки для получения дополнительных примеров.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  
  <div class="container-fluid">
  <div class="row">
    <div class="col-sm" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

Сетка Bootstrap 4 VS Boostarp 3

Bootstrap 4

Bootstrap 3