My Bootstrap 4 responsive column layout not working

问题

So I made a very simple responsive website layout using Bootstrap 4 so according to the code the no of columns should become 4 when it enters tablet mode ie when the viewport is 768px wide while mine is fine up to 770px showing 4 columns but when it becomes 769px it switches into smartphone mode and take the entire width and stacks on top of each other.

<div class="row">
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
</div>

回答1:

Unlike Bootstrap 3, Bootstrap 4 has a bit different grid system. Here sm starts to act since <768px. and the xs breakpoint now is just col. Here, rewritten a bit.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
  </div>
</div>

回答2:

I hope I understand what you are asking. This should prevent the elements from going to fullscreen before the viewport gets even smaller

<div class="row">
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
</div>

just a reminder for breakpoints, the size(sm/lg) specifies the size of the page that the rule applies to. The rule starts with the smallest size and applies to its size and sizes bigger than it that do not have a rule. The default column size is 12, so that does not need to be specified.

回答3:

Try this, it may solve your problem:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-3" style="background-color:red;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:green;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:pink;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:yellow;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:white;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:orange;">
             col
        </div>
    </div>
</div>

This code will keep only 4 col in the tablet mood and phone mode, but if you want to keep 4 col in pc views too then just remove the col-lg-2 from each class

回答4:

You are using col-lg-2 col-md-3 col-sm-12 classes if you want same view to mobile devices too just use col, like col-3. if you want full width for smallest devices use col-xs-12 it is not important, default is col-xs-12 you can change it col-xs-6 something like that.

来源：https://stackoverflow.com/questions/63231490/my-bootstrap-4-responsive-column-layout-not-working