Bootstrap 3 Vs Bootstrap 4

问题

I have been asked the following in an interview:

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?

回答1:

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

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>

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

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

回答2:

Grid system

Moved to flexbox.
1. Added support for flexbox in the grid mixins and predefined classes.
2. As part of flexbox, included support for vertical and horizontal alignment classes.
Updated grid class names and a new grid tier.
1. Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl. This also means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4).
2. xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).
Updated grid sizes, mixins, and variables.
1. Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.
2. Updated grid mixins to utilize a make-col-ready prep mixin and a make-col to set the flex and max-width for individual column sizing.
3. Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by 12 at their max width.
4. Grid breakpoints and container widths are now handled via Sass maps ($grid-breakpoints and $container-max-widths) instead of a handful of separate variables. These replace the @screen-* variables entirely and allow you to fully customize the grid tiers.
5. Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have @include media-breakpoint-up/down/only. Now, instead of writing @media (min-width: @screen-sm-min) { ... }, you can write @include media-breakpoint-up(sm) { ... }.

来源：https://stackoverflow.com/questions/53757191/bootstrap-3-vs-bootstrap-4

标签

html

css

twitter-bootstrap

bootstrap-4