在引导程序的列上创建具有背景渐变的容器宽度

Question

我创建了这个 codepen 来展示它使用 .container-fluid 的样子：

https://codepen.io/r3plica/pen/xxbmxvv

body {
  background-color: gray;
}

.img {
  border-radius: 50%;
  position: absolute;
  width: 15vw;
  top: 50px;
  right: -7.5vw;
  z-index: 10;
  border: 20px solid black;
}

.col-md-4 {
  background-color: pink;
}

.col-md-8 {
background: rgb(148,87,232);
background: linear-gradient(90deg, rgba(148,87,232,1) 13%, rgba(98,252,241,1) 85%);
}

.col-md-4,
.col-md-8 {
  padding-top: 50px;
  padding-bottom: 50px;
}

p {
  margin: 0 0 1rem 8rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid">  
  <div class="row">
    <div class="col-md-4">
      <img class="img" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16fc7a75ec3%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16fc7a75ec3%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
    </div>
    <div class="col-md-8">
      <p>There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here.</p>
      <p>There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here.</p>
      <p>There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here.</p>
    </div>
  </div>
</div>

问题是，我的客户不希望它是流体宽度；他希望它的宽度为 1140 像素（在大屏幕上），但他希望让渐变保持从 .col-md-8 开始到最右侧的整个宽度。

如果您查看代码笔，则有 2 列。第二列的渐变一直到视口的边缘。他想要一个容器宽度，但仍然希望渐变一直到边缘。如果我做了一个具有设定宽度的容器，它不会。我希望这是有道理的。

这可能吗？

Answer 1

我作弊了一点，但它达到了我相信的预期结果。 我把html改成这样：

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
          <img class="img" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16fc7a75ec3%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16fc7a75ec3%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
      </div>
      <div class="col-md-8">
        <p>There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should
          be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here.</p>
        <p>There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should
          be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here.</p>
        <p>There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should
          be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here. There should be a fair amount of content here.</p>
      </div>
    </div>
  </div>
</div>

然后我将我的 CSS 更改为：

body {
  background-color: gray;
}

.wrapper {
  background: linear-gradient(90deg, gray 50%, rgba(98, 252, 241, 1) 50%);
}

.img {
  border-radius: 50%;
  position: absolute;
  width: 15vw;
  top: 50px;
  right: -7.5vw;
  z-index: 10;
  border: 20px solid black;
}

.col-md-4 {
}

.col-md-8 {
  background: rgb(148, 87, 232);
  background: linear-gradient(
    90deg,
    rgba(148, 87, 232, 1) 13%,
    rgba(98, 252, 241, 1) 85%
  );
}

.col-md-4,
.col-md-8 {
  padding-top: 50px;
  padding-bottom: 50px;
}

p {
  margin: 0 0 1rem 8rem;
}

这是代码笔：

https://codepen.io/r3plica/pen/YzPdPaQ

Answer 2

更新你的风格

body {
  background-color: gray;
  overflow-x: hidden
}

.img {
  border-radius: 50%;
  position: absolute;
  width: 15vw;
  top: 50px;
  right: -7.5vw;
  z-index: 10;
  border: 20px solid black;
}

.col-md-4 {
  background-color: pink;
}

.col-md-8:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgb(148,87,232);
    background: linear-gradient(90deg, rgba(148,87,232,1) 13%, rgba(98,252,241,1) 85%);
    width: 70vw;
}

.col-md-4,
.col-md-8 {
  padding-top: 50px;
  padding-bottom: 50px;
}

p {
  margin: 0 0 1rem 8rem;
}