html - Bootstrap 图像背景覆盖容器内的整个宽度

Question

从昨天开始，我一直在尝试获得图像在左侧外侧而文本 div 仍在容器网格中的效果。我不能使用 container-fluid 因为文本 div 变得流畅，我不希望它覆盖右侧的整个宽度。有什么建议吗？

代码:https://www.codeply.com/go/vTLom0BFoh

Answer 1

使用m-0到container意味着边距将为0px
Bootstrap 4 间距:https://getbootstrap.com/docs/4.0/utilities/spacing/

.left {
  z-index: 0;
  color: #fff;
}

.left:before {
  background-image: url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=700&q=80&cs=tinysrgb&crop=");
  background-repeat: no-repeat;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  top: -15px;
  left: -15px;
  bottom: -15px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container   m-0">
  <div class="row">
    <div class="col-sm-6 left"></div>
    <div class="col-sm-6">
      <h2>Title section</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
    </div>

  </div>
</div>