Question

我正在尝试在Bootstrap 3中完成一些操作。我有两列（宽度不等），我正在尝试在右侧列上创建图像，而在左侧列上的图像一直在（右边缘）视口和视口的左边缘分别）。如何做到这一点？

http://www.bootply.com/m0vFgSR9tM

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

我尝试的事情：

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

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

我该怎么办？

Answer 1

这是你的意思吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

<强> Demo

允许图像在列外延伸

2 个答案: