Создать ширину контейнера с градиентом фона для столбца в bootstrap

Question

Я создал этот кодекс, чтобы показать, как он выглядит, используя .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 колонки. Второй столбец имеет градиент, идущий к краю порта просмотра. Он хочет иметь ширину контейнера, но все же хочет, чтобы этот градиент составлял go до самого края. Если бы я сделал контейнер с заданной шириной, это не так. Я надеюсь, что это имеет смысл.

Возможно ли это?

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