7

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

这是我的标记：

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

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

4

3 回答 3

8

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

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

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

于 2013-08-19T01:12:06.630 回答
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>

于 2014-01-19T19:30:59.697 回答
0

如果我理解你的问题，你想在水平线上显示这些图片，图片之间有一定的空间吗？

首先要使 DIV 符合要求，请更改以下内容

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

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

于 2013-08-19T00:18:19.343 回答