仅在一侧的引导容器宽度

Question

我正在尝试使用Bootstrap创建网站，并且我希望1部分的容器宽度仅适用于页面的左侧。我不想更改其他任何部分的容器宽度，因此我认为我需要创建一个自定义类，但右侧不会像我想要的那样延伸到边缘。

我希望左侧在下面的部分中与容器对齐，但在顶部的部分可以延伸到边缘

Answer 1

在容器内，将“图像” div的宽度扩展到视图宽度的50％-下面的代码：

.extend {
  position: absolute;
  width: 49.8vw;
  height: 100%;
  background: url(https://www.akberiqbal.com/Jumbo.jpg);
}

.show {
  border: 1px dashed red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container show">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
<hr/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1>My First Bootstrap Page</h1>
      <p>Resize this responsive page to see the effect!</p>
      <p>The other side... with lots of content</p>
      <p>The other side... with lots of content</p>
      <p>The other side... with lots of content</p>
      <p>The other side... with lots of content</p>
    </div>
    <div class="col-sm-6 show">
      <div class="extend row">

      </div>
    </div>
  </div>
</div>