如何在 Bootstrap 3 网格系统内分隔这些图像？

我想知道使用 Bootstrap 3 RC2 使用 CSS 在这 3 个图像之间放置空格的最佳方法是什么，因为我目前所做的不是自动调整图像大小，即使我已将宽度设置为自动#pictureid 标签。我希望他们能够内联并相应地调整图像大小。

这是我的标记：

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
    </div>
</div>

CSS:

.container {
    max-width:1000px;
    background-color:white;
}
body {
    background-color:cyan
}
#picture {
    width:auto;
    /*margin-left:10px; */
    /*margin-right:10px; */
}
.col-lg-4 {
    margin-left:10px;
    margin-right:10px;
}

检查我的Fiddle为了更清晰的视野。有没有更好的方法来处理这个问题？

删除您自己的 CSS.col-lg-4：这些边距可能会搞乱 Bootstrap CSS。除此之外，这些列仅在屏幕宽度大于 1200 像素时可见。

将以下类添加到您的 div 中：.col-xs-4 .col-sm-4 and .col-md-4，并给图像一个class="img-responsive"属性。

现在应该可以如您所愿。