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

Question

我正在尝试实现一个有序列表，在li元素中包含一个可折叠的部分。这样做的目的是获得一些关于给定上下文的基本信息，点击链接就可以得到更多的信息。代码工作正常，但编号(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中的短路，切换按钮可以包装到.grid-template-toggle类，折叠块类列表可以由.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>

​