如何在Bootstrap 3网格系统内放置这些图像？

Question

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

这是我的标记:

<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;
}

检查我的小提琴以获得更清晰的视图.有没有更好的方法来处理这个？

Answer 1

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

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

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