如何在 Bootstrap 3 网格系统内分隔这些图像? [英] How do I space these images inside of a Bootstrap 3 grid system?

问题描述

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

这是我的标记:

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

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

CSS:

.container {最大宽度:1000px；背景颜色:白色；}身体 {背景颜色:青色}#图片 {宽度:自动；/* 左边距:10px;*//* 右边距:10px;*/}.col-lg-4 {左边距:10px；边距右:10px;}

查看我的 Fiddle 以获得更清晰的视图.有没有更好的方法来处理这个问题?

解决方案

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

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

它现在应该可以如您所愿.

I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.

Here is my markup:

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

Check my Fiddle for a clearer view. Is there a better way to go about handling this?

解决方案

Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.

Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.

It should work now as you wish.

这篇关于如何在 Bootstrap 3 网格系统内分隔这些图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！