Question

每个引导行中有4个相等的列。我要允许的唯一3种配置是：

所有4个彼此相邻
上方两个，下方两个
所有内容都在一个列中

但是，如果我移动屏幕尺寸，有时会在顶部显示3列，在下面居中显示1列。如何防止这种情况并使上下的列数相等？

<div class="row">
    <div class="col-sm">
      <img src="" class="img">
      </div>
    <div class="col-sm">
      <img src="" class="img">
    </div>
    <div class="col-sm">
      <img src="" class="img">
     </div>
    <div class="col-sm">
      <img src="" class="img">
     </div>
  </div>

基本上，我想防止这种情况

1 |  2  |  3
     4

，仅允许这些：

1  |  2  |  3  |  4

1  |  2
3  |  4

1
2
3
4

感谢您的帮助！

Answer 1

Bootstrap 4使用5个不同的.col类来表示每个元素在各种视口上应占据多少列：

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

请记住，Bootstrap有12列，您只需要在每个断点处将12除以所需的列数即可得到所需的目标.col。例如，如果要为中型设备分配2列，则将12除以2得到6，为类.col-md-6。

假设您要在大型和超大型设备上使用4列，在中型设备上使用2列，在小型和超小型设备上使用1列，则需要使用以下类：

.col-12
.col-sm-12
.col-md-6
.col-lg-3
.col-xl-3

这可以在下面看到：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
    <img src="https://placehold.it/100" class="img">
  </div>
  <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
    <img src="https://placehold.it/100" class="img">
  </div>
  <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
    <img src="https://placehold.it/100" class="img">
  </div>
  <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
    <img src="https://placehold.it/100" class="img">
  </div>
</div>

这将导致元素在拖动视口变窄时从占4列“捕捉”到仅占2列。

PS：还请注意，示例中有两个流氓</div>，如果实际代码中存在流氓{{1}}，则会弄乱显示。

如何使引导程序列仅以相等的倍数折叠？

1 个答案: