Question

我有一个Bootstrap 3网格。

我需要添加一个960像素宽的标题图片。

但是，如果我将它添加到一行，通常在列上填充10px＆＃34;偏移＆＃34;我的形象，因为它不再适合＆＃34;：

enter image description here

我知道如何强制这个工作，但我想知道我是否缺少BS3中的一些修饰符类来使其工作。

而且，是的，我知道我可以使用css背景图像，但客户想要一个图像。

Answer 1

在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>

Answer 2

你可能还有其他东西搞砸了，因为你可以看到，一个容器，一行然后一个img没有给你带边距。

<div class="container" style="background:green">
    <div class="row">
        <img src="http://www.placehold.it/150x150">
    </div>
</div>

http://jsfiddle.net/dBNwq/1

这是整个页面

<!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>

Answer 3

这是我在Bootstrap中多次遇到的问题。你基本上有三个选择：

如果您要将图片放在.row内的列（例如div）内，则必须对图像应用负边距或者父容器等于列的填充：http://codepen.io/anon/pen/xEGkaQ
您也可以将图片（或包裹.row）作为{{1}}的直接子项，但Bootstrap discouraged use to do this。
您可以将.col / .row之外的图像移到一起，给它自己的.container并删除该容器的填充：http://codepen.io/anon/pen/WGvAap。

我通常选择＃1选项。

请注意，这不能回答您的问题。它的意思是写下这个以供将来参考，以解决遇到同样问题的其他人，并且不知道如何强制这个工作。

你问题的实际答案：不，Bootstrap不提供这样的修饰符类。

Answer 4

只需替换div class =＆＃34; container＆＃34; div class =＆＃34; container-fluid＆＃34;

那就是它！

Answer 5

您还可以创建一个涵盖其所在容器的类......

.heroLg {
    size:cover;
    -webkit-size: cover;
    -moz-size: cover;
    -o-size: cover;
}

然后将该类添加到您的图像中。

Answer 6

将图像放入span12

<div class="row">
     <div class="span12">
         <img src="image.jpg" />
     </div> 
</div>

将全宽图像添加到Bootstrap 3行/列？

6 个答案: