html - Bootstrap 3 与 Bootstrap 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

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

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 grid VS boostarp 3

Bootstrap 4

Bootstrap 3