bootstrap5列對齊和一列中的多行

我有一個 3 行布局，其中有多個列和行組合。

我嘗試了這個解決方案，但我無法對我的代碼執行此操作。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="past-wrapper">
  <div class="row align-items-center">
    <div class="col-1 column-aligner">
    <div class="column-header text-center">Ge?mi?</div>
  </div>
  <div class="col-4 column-aligner">deneme</div>
    <div class="col-3 column-aligner">deneme</div>
    <div class="col-3 column-aligner">deneme</div>
  </div>
</div>

<div class="today-wrapper">
  <div class="row align-items-center">
    <div class="col-1 column-aligner">
      <div class="column-header text-center">Bugün</div>
    </div>
    <div class="col-4 column-aligner">deneme</div>
      <div class="col-3 defect-wrapper justify-content-center">
        <div class="row defect-wrapper-row">
        <div class="col-6 defect-col">deneme</div>
        <div class="col-6 defect-col">deneme</div>
      </div>
    </div>
    <div class="col-3 column-aligner">deneme</div>
  </div>
</div>

<div class="action-wrapper">
  <div class="row align-items-center">
    <div class="col-1 column-aligner action-notes">
      <div class="column-header text-center">Aksiyonlar</div>
      </div>
    <div class="col-10 column-aligner action-notes">deneme</div>
  </div>
</div>

uj5u.com熱心網友回復：

首先，行應該始終是容器的子級。兩者具有需要平衡的抵消利潤。查看網格檔案。我已經使用了這個container-fluid類，所以它們是全寬的。

然后，對于給定的行，您的列總共需要 12 個（或者至少每行應該有相同的總數）。如果您無法做到這一點，請考慮使用Bootstrap 的 flexbox 布局而不是行和列。

此外，如果您希望它們堆疊，您的嵌套列應該跨越整行，這意味著您需要col-12而不是col-6那些。

剩下的唯一事情就是在柱子上設定高度，如果你真的需要它們伸展的話。這可以通過多種方式完成。

我在這里添加了內部 div 和一些 CSS 用于演示目的。除非你想像我一樣應用顏色，否則你不需要這些。

/* styles for demo only */
.row>div>div:not(.row) {
  background: #ddd;
  border: 1px dotted #aaa;
}

.today-wrapper>.row {
  background: pink;
}

<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 past-wrapper">
  <div class="row align-items-center">
    <div class="col-2 column-aligner">
      <div class="column-header text-center">Ge?mi?</div>
    </div>
    <div class="col-4 column-aligner">
      <div>deneme</div>
    </div>
    <div class="col-3 column-aligner">
      <div>deneme</div>
    </div>
    <div class="col-3 column-aligner">
      <div>deneme</div>
    </div>
  </div>
</div>

<div class="container-fluid today-wrapper">
  <div class="row align-items-center">
    <div class="col-2 column-aligner">
      <div class="column-header text-center">
        Bugün
      </div>
    </div>
    <div class="col-4 column-aligner">
      <div>deneme</div>
    </div>
    <div class="col-3 defect-wrapper justify-content-center">
      <div class="row defect-wrapper-row">
        <div class="col-12 defect-col">
          <div>deneme</div>
        </div>
        <div class="col-12 defect-col">
          <div>deneme</div>
        </div>
      </div>
    </div>
    <div class="col-3 column-aligner">
      <div>deneme</div>
    </div>
  </div>
</div>

<div class="container-fluid action-wrapper">
  <div class="row align-items-center">
    <div class="col-2 column-aligner action-notes">
      <div class="column-header text-center">
        <div>Aksiyonlar</div>
      </div>
    </div>
    <div class="col-10 column-aligner action-notes">
      <div>deneme</div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

你有沒有嘗試使用屬性 mx-auto ？

uj5u.com熱心網友回復：

列的總和必須是 12，如果它給或多或少，布局將受到損害。

我對列進行了一些調整。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

<div class="container-fluid text-center">
    <div class="past-wrapper bg-danger">
        <div class="row align-items-center">
            <div class="col-1 column-aligner">
                <div class="column-header">Ge?mi?</div>
            </div>
            <div class="col-4 column-aligner">deneme</div>
            <div class="col-3 column-aligner">deneme</div>
            <div class="col-4 column-aligner">deneme</div>
        </div>
    </div>

    <div class="today-wrapper bg-warning">
        <div class="row align-items-center">
            <div class="col-1 column-aligner">
                <div class="column-header">Bugün</div>
            </div>
            <div class="col-4 column-aligner">deneme</div>
            <div class="col-3 column-aligner">
                <div class="w-100 defect-col">deneme</div>
                <div class="w-100 defect-col">deneme</div>
            </div>
            <div class="col-4 column-aligner">deneme</div>
        </div>
    </div>

    <div class="action-wrapper bg-primary">
        <div class="row align-items-center">
            <div class="col-1 column-aligner action-notes">
                <div class="column-header">Aksiyonlar</div>
            </div>
            <div class="col-11 column-aligner action-notes">deneme</div>
        </div>
    </div>
</div>

標籤：html css 推特引导

上一篇：如何在html中并排顯示影像

下一篇：Tailwind文本底部對齊