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

Question

所以我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，因此根据代码，当它进入平板电脑模式时，列数应变为 4，即当视口为 768 像素宽时，而我的最高可达 770 像素，显示 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 有一点不同 grid system。这里sm 从 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

我希望我明白你在问什么。这应该可以防止元素在视口变得更小之前进入全屏

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

只是对断点的提醒，size(sm/lg) 指定了规则适用的页面的大小。规则从最小的尺寸开始，适用于没有规则的尺寸和大于它的尺寸。默认列大小为 12，因此无需指定。

Answer 3

试试这个，它可能会解决你的问题：

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

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

Answer 4

您正在使用 col-lg-2 col-md-3 col-sm-12 班级 如果您也想在移动设备上看到相同的视图，只需使用col，例如col-3。如果您希望最小设备的全宽使用col-xs-12 这并不重要，默认为col-xs-12 您可以更改它col-xs-6 类似的东西。