twa*_*wan 3 css twitter-bootstrap
是否可以使用引导程序创建10列布局? col-md-1给出12并col-md-2给出6,但我需要10.我怎样才能实现呢?这有什么css"hacks"吗?
我正在考虑在彼此旁边粘贴2个5列网格(来自这个问题/答案),但我不确定如何处理它.
小智 6
BOOTSTRAP 3: 如果你想要全宽,你可以使用这个方法.
但不是20%(1/5*100%),你必须使用:10%:
.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;
}
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
BOOTSTRAP 4: 使用此方法.
| 归档时间: |
|
| 查看次数: |
6494 次 |
| 最近记录: |