如何在左侧有 6 列，右侧有一个流体列，跨越浏览器窗口的大小？

Question

我想知道在引导程序 5 中是否有一种方法可以让流体容器在左侧包含一个普通容器，其中包含 6 列内容，但容器的右侧是流体到浏览器窗口的末尾？

如果我使用普通的流体容器，左侧的内容会固定在浏览器窗口的左侧。但是，我希望左侧的六列保持正常的列模式，而右侧的列扩展。在下面的示例中，右侧容器将保持固定在浏览器窗口的右侧，而左侧蓝色列会随着浏览器窗口的展开而展开。见例子：

这是我对流体容器的尝试 - 工作正常，但我不希望将左侧内容固定到浏览器窗口的开头：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="hero-interior-banner bg-blue">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-xl-6 px-5 pt-5 pb-3 text-center text-xl-start">
        <h1 class="text-uppercase white">Title</h1>

        <p class="white">Some text would go here</p>

        <p> <a href="3" class="button-white">Learn more</a></p>
      </div>

      <div class="col-6 px-0">
        <div class="d-none d-xl-block hero-interior-banner-image float-end">
          <img class="interior-hero-overlay h-100" src="https://via.placeholder.com/400" alt="Hero overlay" />

          <img class="img-fluid h-100 w-100" src="https://via.placeholder.com/400" alt="Cancer research" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我认为不使用容器而是坚持使用列会更好地实现这一点。因此，您的容器内将有 2 列。你提到的那个实际上是 x6 宽，第二列将是你的流体部分。

我还认为拥有 x6 宽的列会破坏您的流畅效果。 x6 将是所有屏幕上屏幕宽度的 50%，因此默认情况下，您的流体区域也将显示为剩余的 50%。它总是会出现一半一半。

在不同的 SM、MD 和 LG 断点尝试这些不同的宽度...

<div class="col-sm-10 col-md-9 col-lg-8">
   Your title and button
</div>

<div class="col"> 
   Fluid to the right.
</div>

<!-- The first column is giving you a slightly wider column as the screen gets smaller -->
<!-- There is no definied width for the second column so it should take up all remaining available space no matter the screen size -->

Answer 2

我真的不确定你在追求什么，所以这里有一些猜测。有关其他选项，请参阅Bootstrap flex docs。

左侧有六个普通列，右侧有一个灵活列，标记最少：

.d-flex > div {
  border: 1px solid pink;
  min-height: 100px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="hero-interior-banner bg-blue">
  <div class="d-flex">
    <div class="">1</div>
    <div class="">2</div>
    <div class="">3</div>
    <div class="">4</div>
    <div class="">5</div>
    <div class="">6</div>
    <div class="flex-grow-1">Auto</div>
  </div>
</div>

前六列包含更具体的布局：

.col {
  border: 1px solid pink;
  min-height: 100px;
}

.col-6+.col-6 {
  border: 1px solid green;
  min-height: 100px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid hero-interior-banner bg-blue">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
      </div>
    </div>

    <div class="col-6">Auto</div>
  </div>
</div>