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

Question

因此，我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，因此根据代码，当它进入平板电脑模式时，列数应该变为 4，即当视口宽度为 768px 时，我的可以显示 4 列的 770px，但当它变为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 开始起作用。 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>

只是提醒一下断点，大小（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 列，但如果您也想在 pc 视图中保留 4 列，则只需从每个 class 中删除 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之类的东西。