我是相对较新的bootstrap我试图让以下3列居中,但它们偏离中心.每列都是col-md-3,第一列的偏移量为1,我可以理解为什么它没有居中,但我无法弄清楚如何使它们居中.
我在bootply创建了这个例子
解决方法
布局的问题在于,为了使3列居中,您必须将左列偏移1.5(剩余列的一半)：
// 12 Column Layout,3 columns of col-md-3,offset of 1.5 needed (which isn't a class) 12 - (3 + 3 + 3) = 3 / 2 = 1.5
由于这不起作用(因为col-md-offset-1.5不是一个类)我认为你有2个选项：
选项1：将col-md-3更改为col-md-4并将其放入容器中：
<div class="container"> <div class="col-md-4 Box"> <div> <h4>Box 1</h4> <p>some text dfgdfgdfgdfg</p> </div> </div> <div class="col-md-4 Box"> <div> <h4>Box 2</h4> <p>some text dfgdfgdfgdfg</p> </div> </div> <div class="col-md-4 Box"> <div> <h4>Box 3</h4> <p>some text dfgdfgdfgdfg</p> </div> </div> </div>
选项2：将col-md-3更改为col-md-2,将col-md-offset-1更改为col-md-offset-3并将其放入容器流体中：
<div class="container-fluid"> <div class="col-md-2 col-md-offset-3 Box"> <div> <h4>Box 1</h4> <p>some text dfgdfgdfgdfg</p> </div> </div> <div class="col-md-2 Box"> <div> <h4>Box 2</h4> <p>some text dfgdfgdfgdfg</p> </div> </div> <div class="col-md-2 Box"> <div> <h4>Box 3</h4> <p>some text dfgdfgdfgdfg</p> </div> </div> </div>
这两种方法都会更改布局,以便占用整个12列(或正确偏移),但是可以为您提供更多空间.
有关Bootstrap Grid的更多信息,请参阅Documentation