列表编号与内容不垂直对齐

Question

我正在尝试在 li 元素内实现一个带有可折叠部分的有序列表。我们的想法是获得有关给定上下文的一些基本信息，然后单击 link 可以获得更多信息。代码有效，但编号 (1.) 未与内容 (Click to collapse) 垂直对齐，我不知道它如何正确实现。我不是 css 大师，所以也许你可以帮助我。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Answer 1

您可以制作 list-group-item 网格（添加 .d-grid、.grid-template）并制作自定义网格区域以将内部内容放置到特殊单元格中，请参阅代码片段 CSS部分。

同样对于 CSS 中的短裤，toggle-button 可以包装到 .grid-template-toggle class 并且折叠块 class 列表可以扩展 .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/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Answer 2

.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/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

列表编号与内容不垂直对齐

list numbering not vertical align with content

css

twitter-bootstrap

bootstrap-5