时间戳

首页 > 解决方案 > 如何使用 Bootstrap 网格在整个页面宽度上插入背景图像？

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

问题描述

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

马上： 马上

正如我希望的那样： 如我所愿

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

标签： cssbootstrap-4

解决方案

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

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

推荐阅读