如何在 Bootstrap 中创建七个相等的列？-css教程-PHP中文网

如何在 Bootstrap 中创建七个相等的列？

Mary-Kate Olsen

发布： 2024-11-01 14:59:28

原创

574 人浏览过

How to Create Seven Equal Columns in Bootstrap?

实现 7 个相等的 Bootstrap 列

在 Bootstrap 中，创建列很简单，但如何实现不太常见的列配置并不总是显而易见的，例如七个相等的列。

覆盖列宽使用CSS媒体查询

要实现七个相等的列，我们需要使用CSS媒体查询覆盖Bootstrap列的默认宽度。操作方法如下：

为行容器创建自定义类，例如“七列”。
使用 CSS 媒体查询设置该行中各个列的宽度容器。

CSS代码：

<code class="css">@media (min-width: 768px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}</code>

登录后复制

计算列宽：

宽度使用以下公式计算：

width = 100% / 7 column-number

登录后复制

在本例中，有七列：

width = 100% / 7 = 14.285714285714285714285714285714%

登录后复制

这意味着每一列都应该设置到父行容器的 14.285714285714285714285714285714%。

HTML 标记：

<code class="html"><div class="container">
  <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>
</div></code>

登录后复制

工作演示：

检查在 jsbin 上查看七个相等的列的工作演示：
https://jsbin.com/vuvut/3/edit?css,output

以上是如何在 Bootstrap 中创建七个相等的列？的详细内容。更多信息请关注PHP中文网其他相关文章！