引导容器中的一列，另一列延伸到屏幕边缘

Question

我想实现这样的目标。

我尝试过使用容器液体并在左列上手动设置margin-left，但这不是100％。 我还尝试了与本文不同的变体，但这也不起作用。 https://css-tricks.com/full-width-containers-limited-width-parents/

标记就是这样

<div class="container">
  <div class="row">
    <div class="col-md-6">left column</div>
    <div class="col-md-6">right column should extend to right screen edge</div>
  </div>
</div>

Answer 1

如果您使用的是Bootstrap 4 +版本，请在下面的第二个div标签中尝试

<div class="col-md-6 text-md-right pr-md-0">right column should extend to right screen edge</div>

Answer 2

尝试这种方式（引导程序4）

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 offset-md-2">
      Content
    </div>
    <div class="col-md-6 text-md-right pr-md-0">
      Images
    </div>
  </div>
</div>

https://jsfiddle.net/lalji1051/9Lrhwboc/2/