实现 7 个相等的 Bootstrap 列
在 Bootstrap 中,创建列很简单,但如何实现不太常见的列配置并不总是显而易见的,例如七个相等的列。
覆盖列宽使用CSS媒体查询
要实现七个相等的列,我们需要使用CSS媒体查询覆盖Bootstrap列的默认宽度。操作方法如下:
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中文网其他相关文章!