Bootstrap 的 7 等列网格系统
使用 Bootstrap 时，创建列数不均匀的布局可能会很困难。 Bootstrap 网格系统通常遵循偶数，这让许多人想知道 7 个相等的列是否可行。
答案在于使用 CSS3 @media 查询覆盖列宽。以下是实现它的方法：
声明容器类： 首先创建一个容器类，7 列将驻留在其中。例如：
<code class="html"><div class="container"> ... </div></code>
定义行和列结构： 在容器内，定义具有所需类的一行和 7 列：
<code class="html"><div class="row seven-cols"> <div class="col-md-1">Col 1</div> <div class="col-md-1">Col 2</div> <div class="col-md-1">Col 3</div> <div class="col-md-1">Col 4</div> <div class="col-md-1">Col 5</div> <div class="col-md-1">Col 6</div> <div class="col-md-1">Col 7</div> </div></code>
计算列宽：根据列数（在本例中为 7）确定适当的列宽。宽度的公式为：
Width = 100% / Number of Columns
因此，对于 7 列，宽度为 100% / 7 ≈ 14.2857%。
覆盖列宽使用媒体查询： 要覆盖默认列宽，请使用 CSS 媒体查询来定位特定断点。例如：
<code class="css">@media (min-width: 992px) {
.seven-cols .col-md-1 {
width: 14.285714285714285714285714285714%;
}
}</code>通过包含这些媒体查询，您可以确保列宽根据屏幕尺寸进行调整。
工作演示：
访问此在线演示，查看 7 个相等的列的实际效果：
[演示链接]
以上是Bootstrap 网格系统可以创建 7 个相等的列吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
