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

【问题标题】：How do I space these images inside of a Bootstrap 3 grid system?如何在 Bootstrap 3 网格系统中分隔这些图像？
【发布时间】：2013-08-20 16:59:25
【问题描述】：

我想知道使用 Bootstrap 3 RC2 使用 CSS 在这 3 个图像之间放置空格的最佳方法是，因为我目前所做的不是自动调整图像大小，即使我已将宽度设置为自动在我的#picture 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 以获得更清晰的视图。有没有更好的方法来处理这个问题？

【问题讨论】：

offtopic：将 id="picture" 更改为 class="picture"...您可以使用特定 id 一次，多次上课..它不会解决您的问题，但它会让您例子更有效

标签： html css responsive-design twitter-bootstrap-3

【解决方案1】：

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

将以下类添加到您的 div 中：.col-xs-4 .col-sm-4 和 .col-md-4，并为图像赋予 class="img-responsive" 属性。

它现在应该可以按您的意愿工作了。

【讨论】：

【解决方案2】：

正如 Harm Wellink 所说，删除你的 CSS。您应该只需要以下 html。注意“col-xs-4”和“img-responsive”类。如果您打算在所有屏幕尺寸上都有 3 列，则不需要 col-sm-4、col-md-4、col-lg-4。

<div class="container">
<div class="row">
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
    </div>
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
    </div>
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
    </div>
</div>

【讨论】：

【解决方案3】：

如果我理解您的问题，您希望将这些图片显示在水平线上，并在图片之间留出一定的间距？

首先要让 DIV 的行更改以下内容

.col-lg-4 {
   display: inline-block;
}

尝试为您的容器和行指定宽度（例如 100%），然后为您的 div 保存图片。希望这对您有所帮助？

【讨论】：

我添加了你的 CSS。没有改变任何东西。此外，我将容器的 maxwidth:1000px 更改为宽度：1000px。该行是流动的，因此它是 1000px 以匹配容器大小。此外，引导 CSS 将 col-lg-4 的宽度预设为 33.3px 所以..还有什么建议吗？
非常不建议为这样的普通类更改属性。出于特定目的。如果您认为此属性将解决您的问题，只需添加另一个具有此属性的类并将该类添加到您的元素。