引导排水沟宽度和网格居中答案

【问题标题】：bootstrap gutter width and grid centering引导排水沟宽度和网格居中
【发布时间】：2016-07-12 14:19:51
【问题描述】：

我一直在寻找使容器在引导程序中居中并减小装订线宽度的方法，但一直未能找到解决方案。我有一个图像网格（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 是一个框架，建立在它之上
使用img-responsive取消设置图像宽度100px
您还使用了两个类标签，如果您使用 100 像素的固定宽度，那么使用 img-responsive 有什么意义？ width= '100px' class='img-responsive' class="thumbnail"

标签： css twitter-bootstrap

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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

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

删除列之间的间距也是如此。

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

有时您可能需要 Bootstrap 开箱即用地按预期运行，因此我建议您使用这些而不是编辑核心 Bootstrap 文件。

这是一个显示你想要什么的小提琴（我认为）。 https://jsfiddle.net/Gt25L/583/

【讨论】：