Html 如何在 Bootstrap 3 网格系统内分隔这些图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18304619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I space these images inside of a Bootstrap 3 grid system?
提问by Ashley Brown
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 #pictureid tag. I wish for them to b inline and resize the images accordingly.
我想知道使用 Bootstrap 3 RC2 使用 CSS 在这 3 个图像之间放置空格的最佳方法是什么，因为我目前所做的不是自动调整图像大小，即使我在我的#pictureid中将宽度设置为 auto标签。我希望他们内联并相应地调整图像大小。
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:
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 Fiddlefor a clearer view. Is there a better way to go about handling this?
检查我的小提琴以获得更清晰的视图。有没有更好的方法来处理这个问题？
回答by Harm Wellink
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.
删除您自己的 CSS for .col-lg-4：这些边距可能会搞砸 Bootstrap CSS。除此之外，这些列仅当您的屏幕宽度大于 1200 像素时才可见。
Add the following classes to your divs: .col-xs-4.col-sm-4and .col-md-4, and give images a class="img-responsive"attribute.
将以下类添加到您的 div:.col-xs-4.col-sm-4和.col-md-4，并为图像提供一个class="img-responsive"属性。
It should work now as you wish.
它现在应该可以如您所愿。
回答by sevmusic
As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.
正如 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>
回答by Harm Wellink
If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?
如果我理解你的问题，你想在水平线上显示这些图片，图片之间有一定的空间？
First of all to get the DIV's in line change the following
首先，要使 DIV 保持一致，请更改以下内容
.col-lg-4 {
display: inline-block;
}
try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?
尝试为您的容器和行指定宽度（例如 100%），然后您的 div 包含图片。希望这可以帮助你？
