向Bootstrap 3行/列添加全角图像？
[英]Adding a full-width image to a Bootstrap 3 row/column?
问题描述
我有一个Bootstrap 3网格。
我需要添加一个960像素宽的标题图像。
但是，如果我将其添加到行中，则通常在列上填充10px会“偏移”我的图像，因为它不再“适合”：
我知道如何迫使它起作用，但是我想知道是否在BS3中缺少一些修饰符类来使它起作用。
而且，是的，我知道我可以使用css背景图像，但是客户端希望在那里有图像。
6 个解决方案
解决方案1
1 2015-06-25 16:08:02
在您的CSS中添加一个类，以消除空白以在列中创建全角图像，然后在该列之后添加该类。
.bosom-none {
margin-right: -15px; // Removes the right gap
margin-left: -15px; // Removes the left gap
}
<div class="container">
<div class="row">
<div class="colum-md-6 bosom-none">
<img src="your-image.jpg">
</div>
</div>
</div>
解决方案2
0 2014-03-29 17:56:12
您可能还有其他麻烦，因为如您所见，容器，行和img不会给您任何空白。
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
这是整个页面
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background:green;">
<div class="row">
<img src="http://www.placehold.it/960x150">
</div>
<div class="row" style="background:red;">
Some other content
</div>
</div>
</body>
</html>
解决方案3
0 2016-09-07 09:20:42
这是我在Bootstrap中多次遇到的问题。 您基本上有三个选择：
如果要将图像放置在
.row内的一列（例如.col-sm-12）内，则必须对图像或与该列的填充相等的父容器应用负边距： http： //codepen.io/anon/pen/xEGkaQ您也可以改为使图像（或环绕
div）成为.row的直接子级，但建议不要使用Bootstrap这样做 。您可以将图像全部移到.col / .row之外，赋予它自己的.container并摆脱该容器的填充： http ://codepen.io/anon/pen/WGvAap。
我通常会选择选项＃1。
请注意，这不能回答您的问题。 它的意思是将其编写为以后遇到相同问题的其他人（不知道如何使它起作用）的参考。
您问题的实际答案：不，Bootstrap不提供此类修饰符类。
解决方案4
-1 2015-05-17 17:06:30
只需将div class =“ container”替换为div class =“ container-fluid”
就是这样！
解决方案5
-1 2016-02-22 19:40:50
您还可以创建一个类来覆盖其中的容器。
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
然后将类添加到您的图像。
解决方案6
-2 2014-03-29 18:05:41
将图像放入span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>
具有 2 个不同背景（和 2 列）的 Bootstrap 全角
[英]Bootstrap full-width with 2 different backgrounds (and 2 columns)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.