是否可以使用 bootstrap 创建 10 列布局? col-md-1
给出 12,col-md-2
给出 6,但我需要 10。我该如何实现?是否有任何 css “hacks”?
我正在考虑将 2 个 5 列网格彼此相邻粘贴(来自 this 问题/答案),但我不确定如何处理。
最佳答案
Bootstrap 3: 如果你想要全宽,你可以使用 this aproach .
但是您必须使用:10% 而不是 20% (1/5 *100%):
.col-xs-1-10,
.col-sm-1-10 {
position: relative;
min-height: 1px;
}
.col-xs-1-10 {
width: 10%;
float: left;
}
@media (min-width: 768px) {
.col-sm-1-10 {
width: 10%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-1-10 {
width: 10%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-1-10 {
width: 10%;
float: left;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-1-10">
1
</div>
<div class="col-xs-1-10">
2
</div>
<div class="col-xs-1-10">
3
</div>
<div class="col-xs-1-10">
4
</div>
<div class="col-xs-1-10">
5
</div>
<div class="col-xs-1-10">
6
</div>
<div class="col-xs-1-10">
7
</div>
<div class="col-xs-1-10">
8
</div>
<div class="col-xs-1-10">
9
</div>
<div class="col-xs-1-10">
10
</div>
</div>
Bootstrap 4: 使用 this aproach .
关于css - 使用 bootstrap 创建 10 列的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44671734/