css - 如何使用 Bootstrap 网格在整个页面宽度上插入背景图像？

Question

我正在使用 Bootstrap 网格，现在我想插入一个背景图像。然而，它并没有跨越页面的整个宽度，它只是停留在行中定义的列的边界内。

现在:
_{(来源:bilder-upload.eu)}

如我所愿:
_{(来源:bilder-upload.eu)}

<div class="background-image">
    <div class="row">
        <div class="column">
            <p>Lorem ipsum</p>
        </div>
        <div class="column">
            <p>Lorem ipsum</p>
        </div>
    </div>
</div>

Answer 1

将 container div 包裹在 container-fluid div 中，并为其应用背景

.container {
  border: 1px solid red;
}

.background-image {
  background: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid background-image">
  <div class="container">
    <div class="row">
      <div class="col-sm">
        <p>Lorem ipsum</p>
      </div>
      <div class="col-sm">
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>