我正试图将列的内容居中。看起来对我没用啊。这是我的HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
JSFiddle演示
当前回答
如果上述工作都没有(就像在我的情况下试图居中输入)，我使用Boostrap 4偏移量:
<div class="row">
<div class="col-6 offset-3">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
</div>
</div>
其他回答
//add this to your css
.myClass{
margin 0 auto;
}
// add the class to the span tag( could add it to the div and not using a span
// at all
<div class="row">
<div class="col-xs-1 center-block">
<span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Use:
<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
而不是
<div class="col-xs-1 center-block">
你也可以使用bootstrap 3 css:
<!-- recommended method -->
<div class="col-xs-1 text-center">
Bootstrap 4现在有将内容居中的伸缩类:
<div class="d-flex justify-content-center">
<div>some content</div>
</div>
注意，默认情况下，它将是x轴，除非flex方向是列
如果上述工作都没有(就像在我的情况下试图居中输入)，我使用Boostrap 4偏移量:
<div class="row">
<div class="col-6 offset-3">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
</div>
</div>
col- gl -4 col-md-6
1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
2. col-md-6 ≥ 970px (popular 1024, 1200)
3. col-sm-8 ≥ 768px (popular 800, 768)
4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
5. mx-auto = always block center
这是一种简单的方法。
<div class="row">
<div class="col-md-6 mx-auto">
<p>My text</p>
</div>
</div>
数字6控制列的宽度。
