时间戳

首页 > 解决方案 > 将列表组向右浮动

css - 将列表组向右浮动

问题描述

我是 Bootstrap 的新手，有 15 个列表项。我希望最后 7 项在右侧（参见当前情况图片）。我已经尝试了几个教程，但它不起作用。你们能帮助我并给我一些方法吗？

即使这是一个完全的初学者问题，我也会感谢您的帮助。

我想这样做：

像这样

项目清单

<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">Der einfache uns sichere Weg</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
    </ul>
  </div>
</section>

标签： csshtmlbootstrap-4

解决方案

CSS-Grid 可以做到这一点。

我们只提供 2 个“列”并将行数设置为“8”（在本例中为 15 -7 = 8）

.list-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, 1fr);
    grid-auto-flow:column;
}
<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">Der einfache uns sichere Weg</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
    </ul>
  </div>
</section>

或者

如果数量未知li并且最后 7 项需要在第二列中，也可以使用:nth-last-child(-n+7)

.list-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
}

li {
  grid-column: 1;
}

li:nth-last-child(-n+7) {
  grid-column: 2;
}
<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">Der einfache uns sichere Weg</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
      <li>Item 17</li>
      <li>Item 18</li>
      <li>Item 19</li>
      <li>Item 20</li>
    </ul>
  </div>
</section>

推荐阅读