html - Bootstrap，将四张图片连续对齐，没有间隙

Question

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

图片如下，因为我需要 10 个声望才能发布图片。

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

Answer 1

Imo 现在的人越来越依赖助推器了。

代替更改 Bootstrap 以适应你想要的东西，弄乱 css 和覆盖属性我发现当(在这种情况下)你只需要几行时制作你自己的 css 更容易。

使用这个基本的 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