我想知道是否有人可以解释我如何在 bootstrap 中获得 7 个相等的列?我正在尝试制作日历。这段代码似乎做 5:
div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
我的主要内容有以下类,所以我希望 7 列位于其中:
col-lg-12
谁能解释这是否可行,或者我是否必须坚持使用偶数?
最佳答案
嗯,在我看来,您可能需要使用 CSS3 @media
查询来覆盖列的 width
。
这是我创建一个 7 列网格系统的尝试:
<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>
@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
/**
* The following is not really needed in this case
* Only to demonstrate the usage of @media for large screens
*/
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
width
的值来自:
width = 100% / 7 column-number = 14.285714285714285714285714285714%
工作演示 - ( jsbin )
运行代码片段并点击“完整页面”。
.col-md-1 {
background-color: gold;
}
@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
其他选项
此外,您可以使用 Custom Builder 构建您自己的 7 列版本的 Twitter Bootstrap (更改 @grid-columns
,...)。
如果您正在使用 less 编译器,您可以下载 less 版本的 Twitter Bootstrap(来自 Github )和 edit the variables.less
文件代替。
关于html - Bootstrap 中的 7 个相等的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21955088/