[英]White space left and right around images when using bootstrap col
I have a row with 3 images. 我有一排有3张图片。
Image left has white space on the left side. 左侧图像左侧有空白。
Image right has white space on the right side. 右侧的图像右侧有空白。
How can I fix this so I don't have any with space on the left and right side? 我该如何解决这个问题,使左右两侧都没有空间?
See my code below: 请参阅下面的代码:
The background is orange in the image so it's better visible. 图像中的背景为橙色,因此更清晰可见。
HTML: HTML:
<div class="container section">
<div class="row">
<div class="col-md-offset-1 col-md-10 featured">
<div class="col-md-4 img-featured-1">
<%= image_tag("featured-1.jpeg", class: "img-responsive") %>
</div>
<div class="col-md-4 img-featured-2">
<%= image_tag("featured-2.jpeg", class: "img-responsive") %>
</div>
<div class="col-md-4 img-featured-3">
<%= image_tag("featured-3.jpeg", class: "img-responsive") %>
</div>
</div>
</div>
</div>
CSS: CSS:
.featured {
background-color: orange;
}
.img-featured-1 {
width: 33.33333%;
float: left;
}
.img-featured-2 {
width: 33.33333%;
}
.img-featured-3 {
width: 33.33333%;
float: right;
}
Try this: 尝试这个:
.featured {
background-color: orange;
}
.nopadding {
padding:15px 0px;}
+ +
<div class="container section">
<div class="row">
<div class="col-md-offset-1 col-md-10 nopadding">
<div class="col-md-4 img-featured-1">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
<div class="col-md-4 img-featured-2">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
<div class="col-md-4 img-featured-3">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
</div>
</div>
</div>
It's probably because the .row class is adding some margin on the sides. 可能是因为.row类在两侧增加了一些边距。
Try this: 尝试这个:
.row {
margin: 0;
}
Couple things, first thing is your style sheet. 几件事情,第一件事是您的样式表。 It should be .img-featured-1 (the dot defines this style applies to classes of the given name).
它应该是.img-featured-1(点定义此样式适用于给定名称的类)。
Next, if that doesn't resolve, check your themes style sheet and or override the margin and padding with { margin: 0 !important; 接下来,如果仍不能解决问题,请检查您的主题样式表,或使用{margin:0!important; padding: 0 !important;
填充:0!重要; }
}
Finally, make sure your images themselves don't have white / transparent space. 最后,请确保您的图像本身没有白色/透明空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.