Bootstrap,连续四张图片无间隙对齐

Question

]我想用 bootstrap 得到这个网站的结构。我该如何进行？当我不使用边距和填充设置为 0 的填充行时，内容只是左对齐。使用默认的 col class，我在用于图像容器的框之间得到白色 space。

图像在下面，因为我需要 10 个声望才能 post 个图像。

https://dl.dropboxusercontent.com/u/71295596/grid.jpg

Answer 1

我觉得现在的人太依赖助推器了。

Instead of changing bootstrap to adapt what you want, messing with the css and overwritten properties I find it much easier much easier to much your own css when (in this case) ) 你只需要几行。

使用这个基本的 html 结构：

<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>
<div>
    <img src="your image" alt=""/>
</div>

还有这些 CSS:

div {
    width:25%;
    float:left; 
}
div img {
    width:100%; 
    display:block;
}

您有想要的布局。更重要的是，您可以添加：

@media (max-width: 600px) {
div {width:50%;}
}

@media (max-width: 400px) {
div {width:100%;}
}

现在完全响应：FIDDLE

Bootstrap,连续四张图片无间隙对齐

Bootstrap, align four pics in a row without gaps

html

css

twitter-bootstrap-3