允许图像扩展到列外

Question

我试图在Bootstrap 3中完成一些事情。我有两列(不相等的宽度)，我试图使图像在右侧列和图像在左侧列一路走(分别到视口的右边缘和视口的左边缘)。如何做到这一点?

http://www.bootply.com/m0vFgSR9tM

我想让这两个图像一直延伸到覆盖屏幕。

我尝试过的事情:

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

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

我该怎么办?

Answer 1

你是这个意思吗?

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

Answer 2

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

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