引导程序 3 与引导程序 4

Question

我在一次采访中被问到以下问题：

bootstrap 3 的网格系统中的问题是什么，已在 bootstrap 4 中修复，当时我没有找到答案，我搜索了很多，但从未找到好的答案，但据我所知 bootstrap 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

在引导程序 3 中，您必须将 sm 之后的数字设置为 col-sm-3 如果您不设置数字，则将所有行都设置为 col-sm-12

see documention

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

在 bootstrap 4 中，如果您使用 col-sm，它将变为 4

see documention

感谢 flexbox，没有指定宽度的网格列将 自动布局为等宽列。例如，四个 .col-sm 的每个实例都将自动为 25% 宽 小断点及以上。有关更多信息，请参阅auto-layout columns 部分 例子。

  <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

引导程序 4

引导 3

Answer 2

Grid system

• 移至弹性盒。
  1. 在网格混合和预定义类中添加了对 flexbox 的支持。
  2. 作为 flexbox 的一部分，包括对垂直和水平对齐类的支持。
• 更新了网格类名称和新的网格层。
  1. 在 768px 以下添加了一个新的 sm 网格层，以实现更精细的控制。我们现在有 xs、sm、md、lg 和 xl。这也意味着每一层都提升了一个级别（因此 v3 中的 .col-md-6 现在是 v4 中的 .col-lg-6）。
  2. xs 网格类已被修改为不需要中缀来更准确地表示它们开始应用最小宽度的样式：0 而不是设置的像素值。现在是 .col-6，而不是 .col-xs-6。所有其他网格层都需要中缀（例如 sm）。
• 更新了网格大小、mixin 和变量。
  1. 网格排水沟现在有一个 Sass 映射，因此您可以在每个断点指定特定的排水沟宽度。
  2. 更新了 grid mixin 以利用 make-col-ready prep mixin 和 make-col 来设置单个列大小的 flex 和 max-width。
  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) { ... }。