Бутстрап 3 против бутстрапа 4

в начальной загрузке 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

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

Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.

  <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 против Boostarp 3

Бутстрап 4

Бутстрап 3

Система сеток

• Перемещен на flexbox.
  1. Добавлена ​​поддержка flexbox в миксинах сетки и предопределенных классах.
  2. В составе flexbox включена поддержка классов вертикального и горизонтального выравнивания.
• Обновлены имена классов сетки и новый уровень сетки.
  1. Добавлен новый уровень сетки sm ниже 768 пикселей для более детального управления. Теперь у нас есть xs, sm, md, lg и xl. Это также означает, что каждый уровень был повышен на один уровень (так .col-md-6 в версии 3 теперь является .col-lg-6 в версии 4).
  2. Классы сетки xs были изменены, чтобы инфикс не требовал более точного представления того, что они начинают применять стили при min-width: 0, а не при заданном значении пикселя. Вместо .col-xs-6 теперь .col-6. Для всех остальных ярусов сетки требуется инфикс (например, sm).
• Обновлены размеры сетки, миксины и переменные.
  1. Промежутки сетки теперь имеют карту Sass, так что вы можете указать определенную ширину желобов в каждой точке останова.
  2. Обновлены миксины сетки, чтобы использовать подготовительную миксину make-col-ready и make-col для установки гибкости и максимальной ширины для индивидуального размера столбца.
  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) {...}.