串列編號不垂直與內容對齊

我正在嘗試實作一個有序串列，其中包含li元素內的可折疊部分。這個想法是獲得有關給定背景關系的一些基本資訊，并通過單擊鏈接獲得更多資訊。代碼正在運行，但編號 ( 1.) 與內容 ( Click to collapse) 不垂直對齊，我不知道它如何正確實作。我不是css大師，所以也許你可以幫助我。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ol class="list-group list-group-numbered">
    <li class="list-group-item">
    <div class="d-flex justify-content-between align-items-start">
        <div class="ms-2 me-5">
            <div class="fw-bold">
                <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
                   href="#collapseExample">Click to collpase</a>
            </div>
            some information
        </div>
        <div class="ms-2 ms-5 me-auto">
            some more information
        </div>
        <span class="badge bg-primary rounded-pill">42</span>
    </div>
    <div class="collapse" id="collapseExample">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>Foo, Bar</th>
                <th>Foobar</th>
                <th>FoobarBaz</th>
                <th>Baz</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ol>

uj5u.com熱心網友回復：

您可以制作list-group-item網格（添加.d-grid、.grid-template）并制作自定義網格區域以將內部內容放置到特殊單元格，請參閱代碼片段 CSS 部分。

同樣對于 CSS 中的短褲，toggle-button 可以包裝到.grid-template-toggleclass 并且折疊塊類串列可以擴展為.grid-template-collapse.

.grid-template {
  grid-template-areas: 'num toggle' 'collapse collapse';
  grid-template-columns: min-content 1fr;
}

.grid-template:before {
  grid-area: num;
}

.grid-template-toggle {
  grid-area: toggle;
}

.grid-template-collapse {
  grid-area: collapse;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-grid grid-template">
    <div class="d-flex justify-content-between align-items-start grid-template-toggle">
      <div class="ms-2 me-5">
        <div class="fw-bold">
          <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse" href="#collapseExample">Click to collpase</a>
        </div>
        some information
      </div>
      <div class="ms-2 ms-5 me-auto">
        some more information
      </div>
      <span class="badge bg-primary rounded-pill">42</span>
    </div>
    <div class="collapse grid-template-collapse" id="collapseExample">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Foo, Bar</th>
            <th>Foobar</th>
            <th>FoobarBaz</th>
            <th>Baz</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some Text</td>
            <td>More text text text</td>
            <td>More text text text More text text text</td>
            <td>More text text text More text text text</td>
            <td>More text text text More text text text</td>
          </tr>
        </tbody>
      </table>
    </div>
  </li>
</ol>

uj5u.com熱心網友回復：

.grid-template {
  grid-template-areas: 'num toggle' 'collapse collapse';
  grid-template-columns: min-content auto;
}

.grid-template:before {
  grid-area: num;
}

.grid-template-toggle {
  grid-area: toggle;
}

.grid-template-collapse {
  grid-area: collapse;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ol class="list-group list-group-numbered">
    <li class="list-group-item d-grid grid-template">
    <div class="d-flex justify-content-between align-items-start grid-template-toggle">
        <div class="ms-2 me-5">
            <div class="fw-bold">
                <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
                   href="#collapseExample">Click to collpase</a>
            </div>
            some information
        </div>
        <div class="ms-2 ms-5 me-auto">
            some more information
        </div>
        <span class="badge bg-primary rounded-pill">42</span>
    </div>
    <div class="collapse grid-template-collapse" id="collapseExample">
        <table class="table">
            <thead>
            <tr>
              <th>#</th>
              <th>Foo, Bar</th>
              <th>Foobar</th>
              <th>FoobarBaz</th>
              <th>Baz</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some Text</td>
                    <td>More text text text</td>
                    <td>More text text text More text text text</td>
                    <td>More text text text More text text text</td>
                    <td>More text text text More text text text</td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ol>

標籤：css 推特引导 引导程序 5

上一篇：引導程式上的漢堡按鈕打不開

下一篇：Bootstrap5中修改的行間距