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

前端之家收集整理的这篇文章主要介绍了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”属性.

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

猜你在找的HTML相关文章