我一直在寻找使容器在 bootstrap 中居中并减小间距宽度的方法,但一直未能找到解决方案。我有一个图像网格(2 行,3 列),我希望能够减少列之间间距的宽度并在两行之间添加一个水平间距。我希望能够使网格居中。
<body>
<div class="container" width="400px" >
<div class='row'>
<div class="col-md-2">
<img class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/ width= '100px'>
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
</div>
<div class='row'>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
</div>
</div>
最佳答案
Bootstrap 有一个可以为每个列定义的偏移量。
您可以将每一行包装在一个 col-md-6 中,并为其指定一个偏移量 3。
Bootstrap 使用宽度百分比来处理网格。所以如果你的列是 6 宽,它将是 50% 宽,每边 25% 的边距将使列居中。
<div class='row'>
<div class="col-md-6 col-md-offset-3">
<div class="col-md-2">
<img class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" width='100px'>
</div>
<div class="col-md-2">
<img width='100px' class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/>
</div>
<div class="col-md-2">
<img width='100px' class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/>
</div>
</div>
</div>
关于css - 自举装订线宽度和网格居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38331510/