css - 自举装订线宽度和网格居中

标签 css twitter-bootstrap

我一直在寻找使容器在 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/

相关文章:

jQuery 工具选项卡插件 : Make Active Tab Always first

html - 诊断 div 未对准

css - 无法将文本置于底部,如 float :bottom

javascript - 获取多选中的所有选项

html - CSS:bootstrap 3 缩略图后面的文本

html - 具有固定侧边栏和流动内容的简单两列布局

javascript - 为每个 img 分配一个不同的随机类

html - Bootstrap 不显示我的表单的背景颜色

html - 如何修复 Bootstrap 轮播上方的空白区域?

javascript - Bootstrap 单击后触发 jQuery click(),导致冲突