Question

我一直在寻找将容器置于自举中心并减少装订线宽度但无法找到解决方案的方法。我有一个图像网格（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>

Answer 1

我建议在需要行填充的地方使用一个简单的类。

.row-padded 
{
    margin-top:20px; 
}

删除列之间的间距相同。

.column-nospace
{
   padding: 0 !important;
   margin: 0 !important;
}

有时你可能需要Bootstrap来按预期运行，所以我推荐这些来编辑核心的Bootstrap文件。

这是一个小提琴，显示你想要的东西（我想）。 https://jsfiddle.net/Gt25L/583/

Answer 2

Bootstrap有一个可以为每个col定义的偏移量。

您可以将每行包裹在col-md-6中，并为其赋予偏移量3。

Bootstrap以宽度百分比表示网格。因此，如果您的色谱柱宽度为6，则宽度为50％，每侧25％的余量将使色谱柱居中。

libphutil f43291e99d36045bc459e5133454c0d8fd8768ea (21 Jan 2016)

自举沟槽宽度和网格居中

2 个答案: