允许图像延伸到列之外答案

【问题标题】：Allowing an image to extend outside column允许图像延伸到列之外
【发布时间】：2015-10-18 00:08:50
【问题描述】：

我正在尝试在 Bootstrap 3 中完成某些事情。我有两列（宽度不等），我试图让右侧列上的图像和左侧列上的图像一直穿过（到右边缘视口和视口的左边缘）。如何做到这一点？

http://www.bootply.com/m0vFgSR9tM

我希望这两个图像都能一直延伸到覆盖屏幕。

我尝试过的事情：

1) 流体行和流体容器：但是它们将整个视口分成 12 列，即使对于这个特定的行，我的计算也会变得混乱，所以我仍然想使用容器和行。

2) 负边距。但是我不得不使用background:cover，因为图像并没有完全通过，但是结果非常不愉快，因为它补偿了整个负边距。

我该怎么办？

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

我更喜欢不要弄乱我正在使用的网格，而是将修改类应用于内部元素。

.background1, .background2 {
    ...
    background-size: cover;
}
.edgy {
    margin: 0 -15px;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <div class="background1 edgy">Test</div>
        </div>
        <div class="col-sm-8">
            <div class="background2 edgy">Test</div>
        </div>
    </div>
</div>

Demo

【讨论】：

不，如前所述，使用 container-fluid 会弄乱我对该行的列计算。 bootply.com/7OkBroYutm。请参阅第二张图片需要从黑色 div 开始的位置开始。你明白我的意思吗？
我不知道您指的是什么“计算”，但您根本不应该为该行使用容器。
第二张图片的起点是基于容器列的起点。如果我使用 container-fluid，第二个图像的起点开始得更早。

【解决方案2】：

这是你的意思吗？

.background1 {
    background-image:url('http://i.ytimg.com/vi/wMOpMka6PJI/maxresdefault.jpg');
    width:100%;
    height:400px;
}
.background2 {
    background-image:url('http://www.usc.edu/dept/engineering/summerprograms/assets/001/75466.gif');
    width:100%;
    height:400px;
}
.row .nopadding {
    padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4 nopadding">
            <div class="background1">Test</div>
        </div>
        <div class="col-xs-8 nopadding">
            <div class="background2">Test</div>
        </div>
    </div>
</div>

【讨论】：

不，如前所述，使用 container-fluid 会弄乱我对该行的列计算。 bootply.com/7OkBroYutm。请参阅第二张图片需要从黑色 div 开始的位置开始。你明白我的意思吗？