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

我想知道哪个是用CSS使用Bootstrap 3 RC2在这3个图像之间放置空格的最好方法,因为我现在所做的不是自动调整图像大小,即使我已经将宽度设置为自动#图片ID标签.我希望他们能够内联并相应调整图像大小.

这是我的标记：

<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以获得更清晰的视图.有没有更好的方法来处理这个？

解决方法

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

将以下类添加到div：.col-xs-4 .col-sm-4和.col-md-4,并为图像提供class =“img-responsive”属性.

它现在应该按你的意愿工作.