我怎樣才能在左邊有6列，右邊有一個流體列，跨越瀏覽器視窗的大小？

我想知道引導程式 5 中是否有一種方法可以讓流體容器在左側包含一個普通容器，其中包含 6 列內容，但容器的右側是否可以流動到瀏覽器視窗的末尾？

如果我使用普通流體容器，左側的內容將固定在瀏覽器視窗的左側。但是，我希望左側的六列保持正常的列模式，而右側的列展開。在下面的示例中，右側容器將保持固定在瀏覽器視窗的右側，而左側藍色列隨著瀏覽器視窗的擴展而擴展。見示例：

這是我嘗試使用流體容器 - 作業正常，但我不希望將左側內容固定到瀏覽器視窗的開頭：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

我認為不使用容器而是堅持使用列會更好地實作這一點。因此，您的容器內將有 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 -->

uj5u.com熱心網友回復：

我真的不確定你在追求什么，所以這里有一些猜測。有關其他選項，請參閱Bootstrap flex 檔案。

左側有六個普通列，右側有一個靈活的列，標記最少：

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

標籤：html css 推特引导 容器 bootstrap-5

上一篇：CSS根據內容對齊列中的專案

下一篇：Bootstrap5列的“流體”對齊