Question

我需要将右列的background-color扩展到.container之外。

这是通过使用:before实现的。但是即使没有该列也显示背景。

还有更好的方法吗？

我也无法将背景扩展到767px以下。

section{
  padding: 50px 0;
  position: relative;
}
section:before{
  background: #f1f1f1;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
}
@media (max-width: 767px){
  section:before{
display: none;
  }
  .col-md-4:nth-child(2){
background: #f1f1f1;
padding: t 15px;
padding: b 15px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row justify-content-center">
	<div class="col-md-4">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</p>
	</div>
	<div class="col-md-4">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</p>
	</div>
</div>
</div>
</section>

Codepen-https://codepen.io/afelixj/pen/MdVKaq

Answer 1

尝试

@media (min-width:768px) {
        .width {
            max-width: 570px;
            display: inline-block;
        }

        .bg {
            background-color: #f2f2f2;
        }
    }
    .width {
        padding: 15px;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
      <div class="row m-0">
          <div class="col-md-6 p-0">
              <div class="text-right">
                <div class="width text-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</div>
              </div>
          </div>
          <div class="col-md-6 p-0">
              <div class="bg">
                <div class="width">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</div>
              </div>
          </div>
      </div>
    </section>
</section>

引导网格-扩展背景色

1 个答案: