Question

不确定问题标题是否正确，但我需要帮助才能获得全宽图像。

我试图像这样添加一个css类：

.img-edge{
  margin-right: -15px;
  margin-left: -15px;
}

但它不起作用。

See example here

任何人都知道我能做什么？

Answer 1

只需将图片带到.col-xs-12元素之外，就像这样：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

    </div>
        <img alt="Edge to edge!" src="http://dummyimage.com/1900x400/000000/fff" class="img-responsive img-edge">
 </div>
</div>

Working Example

Twitter Bootstrap 3 img-responsive edge-to-edge（出血）

1 个答案: