Question

我是bootstrap的新手，并试图在网页上放置一个简单的图像网格。我喜欢图像之间的边界，但不喜欢浏览器的边缘。默认情况下，bootstrap会在col-md元素的所有4个边上添加填充。

我不能硬编码＆＃39;当浏览器大小根据响应设计改变时，单元格改变位置。有没有办法让bootstrap自动添加填充到内部？

HTML

    <div class="row">
        <div class="col-md-8">

            <img src="~/Content/images/saucer.jpg" />
        </div>
        <div class="col-md-4">
            <img src="~/Content/images/metalbranch.jpg" />

        </div>
    </div>

<div class="row" >
    <div class="col-md-4">
        <img src="~/Content/images/moon.jpg" />
    </div>
    <div class="col-md-4">
        <img src="~/Content/images/peacockOnWood.jpg" />
    </div>
    <div class="col-md-4">
        <img src="~/Content/images/appleGlass.jpg" />
    </div>
</div>


<div class="row">
    <div class="col-md-4">
        <img src="~/Content/images/pianoKeysNecklace.jpg" />
    </div>
    <div class="col-md-8">
        <img src="~/Content/images/treeWithNecklace.jpg" />
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <img src="~/Content/images/gridOfCorks.jpg" />
    </div>
    <div class="col-md-4">
        <img src="~/Content/images/trees.jpg" />
    </div>
</div>

CSS

.col-md-4 img, .col-md-8 img {
    width:100%;
    margin: 20px 0 0 0;
    padding: 0;
}

Answer 1

看看这里：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

所以它应该是这样的：

<div class='container'>
<div class='row'>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div> 
</div>

内部边框上的Bootstrap填充但不是浏览器的边缘

1 个答案: