Bootstrap 4 中容器内的全宽图像

Question

我正在使用 Bootstrap 4，我有一个模板布局

<div class="navbar">
  ...
</div>
<div class="container">
  {{content}}
</div>

这几乎适用于所有情况。但是，有时我希望内容中的图像占据整个宽度，但这是不可能的，因为 .container 使用 left-padding 和 right-padding

我可以通过在每个视图的正确位置而不是在我的模板布局文件中添加 .container 类来解决这个问题，但这会变得很烦人。特别是如果我有一个 CMS，不同的作者可以在其中撰写文章，并且如果他们想要在文章中间放置一个全角图像，他们必须编写原始 html 以类似于

<div class="container">
  some text
</div>
<div class="full-width-image">
  <img src="" alt="">
</div>
<div class="container">
  more text
</div>
..

我该如何解决这个问题？

原文由 Jamgreen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 vw 负边距的单位。而且它响应友好。

 .full-width-image {
   width: 100vw;
   position: relative;
   left: 50%;
   margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}

看我的小提琴： https ://jsfiddle.net/ondrejruzicka/07y0o746/

原文由 ondrejruzicka 发布，翻译遵循 CC BY-SA 3.0 许可协议