Html 将全角图像添加到 Bootstrap 3 行/列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22734156/
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
Adding a full-width image to a Bootstrap 3 row/column?
提问by Steve
I have a Bootstrap 3 grid.
我有一个 Bootstrap 3 网格。
I need to add a header image that's 960 pixels wide.
我需要添加一个 960 像素宽的标题图像。
However, if I add it to a row, the usual padding of 10px on a column "offsets" my image since it no longer "fits":
但是，如果我将它添加到一行中，列上通常的 10px 填充会“偏移”我的图像，因为它不再“适合”：
I know how to forcethis to work, but I was wondering if I am missing some modifier class in BS3 to make this work.
我知道如何强制它工作，但我想知道我是否缺少 BS3 中的一些修饰符类来完成这项工作。
And, yes, I know I could use a css background-image but the client wants an image there.
而且，是的，我知道我可以使用 css 背景图像，但客户想要一个图像。
回答by Andrew Biddinger
Add a class to your CSS that removes the margin to make full-width image within the column and then add that class after the column.
向您的 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>
回答by Andreas
You probably have something else messing it up because as you can see, a container, row and then a img gives you no margins.
您可能还有其他事情把它搞砸了，因为正如您所看到的，容器、行和 img 没有给您任何边距。
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
Here's the whole page
这是整个页面
<!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>
回答by Michiel
This is a problem I've encountered many times with Bootstrap. You basically have three options:
这是我在使用 Bootstrap 时遇到过很多次的问题。你基本上有三个选择：
If you're placing the image inside a column (e.g.
.col-sm-12) which is inside a.row, you'll have to apply a negative margin to the image or a parent container equal to the column's padding: http://codepen.io/anon/pen/xEGkaQYou could also instead make the image (or a wrapping
div) a direct child of the.rowbut Bootstrap discouraged use to do this.You can move the image outside the .col/.row all together, give it it's own .container and rid of that container's padding: http://codepen.io/anon/pen/WGvAap.
如果您将图像放置在 a 内的列（例如
.col-sm-12）内.row，则必须对图像或等于列填充的父容器应用负边距：http: //codepen.io/anon/笔/xEGkaQ您也可以改为使图像（或包装
div）成为.row但Bootstrap 不鼓励使用的直接子项来执行此操作。您可以将图像一起移到 .col/.row 之外，给它自己的 .container 并去掉该容器的填充：http://codepen.io/anon/pen/WGvAap 。
I usually go for option #1.
我通常选择选项#1。
Please note that this does not answer your question. It meant to write this for future reference for other people encountering the same problem and do not know how to forcethis to work.
请注意，这并不能回答您的问题。它的意思是写这个以供将来遇到同样问题但不知道如何强制它工作的其他人参考。
The actual answer to your question: no, Bootstrap does not offer such a modifier class.
您问题的实际答案：不，Bootstrap 不提供这样的修饰符类。
回答by Francois
Simply replace div class="container" with div class="container-fluid"
只需将 div class="container" 替换为 div class="container-fluid"
and that's it !
就是这样！
回答by Moral Minority
You can also create a class that will cover the container it is in...
您还可以创建一个类来覆盖它所在的容器...
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
Then add the class to your image.
然后将类添加到您的图像中。
回答by iwcoder
put the image into a span12
将图像放入 span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>
