Question

从昨天开始，我试图获得图像在左边，文本div仍在容器网格中的效果。我不能使用容器流体，因为然后文本div变得流畅，我不希望它覆盖右侧的整个宽度。有什么提示吗？

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

Answer 1

如果你的图像被裁剪，你可以使用

.left:before{background-size: cover;}

但要确保使用正确的图像才能看起来不会压缩

Answer 2

图像未完全显示然后您使用.left：before {background-size：contains; }或.left：在{background-size：cover;之前在CSS中它可以解决你的问题

Answer 3

使用m-0与container相比，保证金为0px
Bootstrap 4间距：https://getbootstrap.com/docs/4.0/utilities/spacing/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以使用container-fluid，然后手动设置右列的样式，以使其仅占非流体容器宽度的一半。

这是一个工作示例：

<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>
<style>
.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;
}

/*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
*/

@media(min-width: 576px) {
  .col-not-fluid {
    flex-basis: 270px;
    max-width: 270px;
  }
}

@media(min-width: 768px) {
  .col-not-fluid {
    flex-basis: 360px;
    max-width: 360px;
  }
}

@media(min-width: 992px) {
  .col-not-fluid {
    flex-basis: 480px;
    max-width: 480px;
  }
}

@media(min-width: 1200px) {
  .col-not-fluid {
    flex-basis: 570px;
    max-width: 570px;
  }
}
</style>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 left"></div>
    <div class="col-sm-6 col-not-fluid">
      <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>

注意：解决方案改编自this answer。

Bootstrap图像背景覆盖容器内的全宽

4 个答案: