如何在 Bootstrap 3 网格系统中设置图像间距？

Question

我想知道使用Bootstrap 3 RC2中的CSS最佳方法是在这三个图片之间放置空格，目前我的做法没有自动调整图像大小，即使我已经在#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代码示例，以获得更加清晰的视角。是否有更好的方法来处理此问题？

- ProEvilz

---

离题：将 id="picture" 更改为 class="picture"...你只能使用特定的 id 一次，但可以多次使用 class...这不会解决你的问题，但会使你的例子更有效。 - M.Svrcek

Answer 1

请移除自己针对 .col-lg-4 的CSS样式：这些边距可能会破坏Bootstrap CSS的布局。此外，当屏幕宽度大于1200像素时，这些列才会显示。

请在你的div中添加以下类：.col-xs-4 .col-sm-4和.col-md-4，并给图像添加一个class="img-responsive"属性。

现在应该可以按照您的要求工作了。

- Harm Wellink

Answer 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>

- sevmusic

Answer 3

如果我理解你的问题正确，你想要将这些图片以水平线的形式展示出来，并且在图片之间留有一定的空间？

首先，为了让 DIV 元素在同一行上，需要进行以下更改：

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

尝试为您的容器和行指定宽度（例如100％），然后再为包含图片的div设置宽度。希望这能帮到您？

- Harm Wellink

---

我已经添加了你的CSS，没有做任何更改。此外，我将容器的maxwidth:1000px更改为width:1000px。行是流动的，因此它是1000px以匹配容器大小。此外，col-lg-4的宽度由Bootstrap CSS预设为33.3px。那么，还有什么建议吗？ - ProEvilz

非常不建议为这样一个常见的类更改属性，除非是为了特定的目的。如果您认为该属性可以解决您的问题，请添加另一个具有此属性的类，并将该类添加到您的元素中。 - Ashi