我的 Bootstrap 4 响应式列布局不起作用

Question

所以我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，因此根据代码，当进入平板电脑模式时，列数应变为 4，即当视口为 768px 宽时，而我的视口最多 770px 显示 4 列，但当它变为 769px，它会切换到智能手机模式并占据整个宽度并相互堆叠。

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

Answer 1

与 Bootstrap 3 不同，Bootstrap 4 有一点不同的网格系统。这里

sm

开始起作用，因为 <768px. and the

xs

断点现在只是

col

。在这里，稍微重写一下。

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

Answer 2

您正在使用

col-lg-2 col-md-3 col-sm-12

类 如果您也想在移动设备上看到相同的视图，只需使用

col

，例如

col-3

。如果您想要最小设备的全宽，请使用

col-xs-12

这并不重要，默认值为

col-xs-12

您可以更改它

col-xs-6

类似的东西。

Answer 3

这应该可以防止元素在视口变得更小之前进入全屏

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

只是提醒一下断点，大小（sm/lg）指定规则应用的页面的大小。该规则从最小尺寸开始，并适用于它的尺寸以及大于它的没有规则的尺寸。默认列大小为 12，因此不需要指定。

Answer 4

此代码将在平板电脑模式和手机模式下仅保留 4 col，但如果您也想在 PC 视图中保留 4 col，那么只需从每个类中删除 col-lg-2 即可。

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