引导列跳过两个地方

Posted 2023-03-06

【中文标题】引导列跳过两个地方

【英文标题】：Bootstrap columns skip two places

【发布时间】：2016-07-20 00:33:00

【问题描述】：

我有一个 php 页面，页面上有一些项目。我想要大型显示器上的三列，但这就是它的作用。一栏只是跳过第一页上的两栏。当有四列时它不会这样做，但我想要三列。

列上没有其他样式，为什么要这样做？

【参考方案1】：

Tanbi 的建议根据引导指南很好，但如果您不想在项目 div 之间添加 .rowdiv，您可以使用下面提到的 css

.col-md-4:nth-child(3n+3) + .col-md-4clear:both;

我不确定，但我认为这是可行的。

【参考方案2】：

关于元素高度。您可以使用 row 分类的 divs，如下所示。

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
</div>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
  <div class="col-md-4 col-sm-6 col-xs-12">...</div>
</div>

【讨论】：

这不好，因为当应该有两列时，总是一行有两列，一行有一列。

因此您可以尝试为所有 .item 分类的 div 提供相同的高度值。您附加的屏幕截图似乎第二项比其他项更长。 ** 可能与 max-height

一起使用

对我来说，由于现有结构，多行并不是一个简单的选择，但设置固定高度非常有效。