引导程序3与引导程序4 [英] Bootstrap 3 Vs Bootstrap 4

问题描述

在一次采访中有人问我以下问题:

I have been asked the following in an interview:

在引导程序4中已修复的引导程序3的网格系统中出现了什么问题，那时候我没有找到答案，我进行了很多搜索，但从未找到好的答案，但是据我所知如下所示具有col-sm，col-md，col-xl:

What was the problem in the grid system of bootstrap 3 which has been fixed in bootstrap 4, and I didn't find an answer that time and I searched a lot and never found a good answer but as I know that bootstrap 3 has col-sm, col-md, col-xl as per below:

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

但是当我被问到这个问题时，我感到非常困惑，所以请有人帮我详细了解它们之间的区别吗?

But when I was asked this question I got completely confused so please can someone help me to get the difference between them in details?

推荐答案

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

in bootstrap 3 you must set number after sm as col-sm-3 if you do not set number it takes all row as 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中，如果您使用col-sm，则会变为4

In bootstrap 4 it become 4 if you use col-sm

查看文档

多亏了flexbox，没有指定宽度的网格列将 自动布局为等宽列.例如四个 .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网格VS boostarp 3

引导程序4

引导程序3

这篇关于引导程序3与引导程序4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！