Bootstrap 网格系统可以创建 7 个相等的列吗？

Bootstrap 的 7 等列网格系统

使用 Bootstrap 时，创建列数不均匀的布局可能会很困难。 Bootstrap 网格系统通常遵循偶数，这让许多人想知道 7 个相等的列是否可行。

答案在于使用 CSS3 @media 查询覆盖列宽。以下是实现它的方法：

1. 声明容器类： 首先创建一个容器类，7 列将驻留在其中。例如：

   <code class="html"><div class="container">
    ...
   </div></code>

2. 定义行和列结构： 在容器内，定义具有所需类的一行和 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>

3. 计算列宽：根据列数（在本例中为 7）确定适当的列宽。宽度的公式为：

   Width = 100% / Number of Columns

   因此，对于 7 列，宽度为 100% / 7 ≈ 14.2857%。

4. 覆盖列宽使用媒体查询： 要覆盖默认列宽，请使用 CSS 媒体查询来定位特定断点。例如：

   <code class="css">@media (min-width: 992px) {
     .seven-cols .col-md-1 {
    width: 14.285714285714285714285714285714%;
     }
   }</code>

通过包含这些媒体查询，您可以确保列宽根据屏幕尺寸进行调整。

工作演示：

访问此在线演示，查看 7 个相等的列的实际效果：
[演示链接]

以上是Bootstrap 网格系统可以创建 7 个相等的列吗？的详细内容。更多信息请关注PHP中文网其他相关文章！