所以我用Bootstrap 4做了一个非常简单的响应式网站布局，所以根据代码，当它进入平板模式时，列数应该变成4，即当视区宽为768px时，而我的视区可以达到770px，显示4列，但当它变成769px时，它切换到智能手机模式，并采取整个宽度和堆叠在彼此的顶部。
null
<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>null
与Bootstrap 3不同，Bootstrap 4的网格系统有点不同。 在这里，sm从<768px开始运行。 而xs断点现在只是col。 这里，重写了一点。
null
<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>
我希望我明白你在问什么。 这样可以防止元素在视区变得更小之前变成全屏
<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，因此不需要指定该值。
试试这个，也许能解决你的问题:
<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
