Gre*_*egg 41 center twitter-bootstrap
我有下面的代码,我想将外部"行"div的"井"元素居中.我尝试了各种方法,例如text-align:center(它只是文本的中心而不是内部DIV元素.
这是一个jsfiddle.我的想法是,我得到了一块"好"的瓷砖,并且在4个左右之后它就会被包裹起来.但如果它小于4,它们应该显示在页面的中心.
<body class="container-fluid">
<div class="row">
<div class="well span2">
<div class="row">
<div class="span2">
Header
</div>
</div>
<div class="row">
<div class="span2">
Sub Header
</div>
</div>
</div>
<div class="well span2">
<div class="row">
<div class="span2">
Header
</div>
</div>
<div class="row">
<div class="span2">
Sub Header
</div>
</div>
</div>
</div>
</body>
Ayo*_*o I 98
使用Bootstrap 4,有一个专门用于此的css类.以下将以行内容为中心:
<div class="row justify-content-center">
...inner divs and content...
</div>
有关详细信息,请参阅:https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment.
Gre*_*egg 56
我通过以下方式解决了这个问题:
<body class="container-fluid">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
....
</div>
</div>
</body>
小智 14
试试这个,它有效!
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</p>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</p>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</p>
</div>
</div>
</div>
然后,在css中定义文档中心div和center的宽度:
.center {
margin: 0 auto;
width: 80%;
}
Fak*_*ala 11
对于Bootstrap 4,请使用以下代码:
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
参考:https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
| 归档时间： |
|
| 查看次数： |
176811 次 |
| 最近记录： |