首页 >web前端 >css教程 >如何在 Bootstrap 中创建七个相等的列?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-01 14:59:28553浏览

How to Create Seven Equal Columns in Bootstrap?

实现 7 个相等的 Bootstrap 列

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

覆盖列宽使用CSS媒体查询

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

  1. 为行容器创建自定义类,例如“七列”。
  2. 使用 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn