将超出列表项移动到引导程序中的下一列

Question

我有一行有两列，如下面的 sn-p 所示。 在 Column 1 中，ul 标记下有 7 个列表项。

但我需要在第 1 列中显示 仅 5 个 列表项，其余项目应移至下一列..（即 第 2 列)。

如果列表项超过计数 (5)，我如何根据计数（此处为 5）自动将列表项移动到下一列..

并且预期的结果只能是 html 和 css，不应该有任何像 jquery 或任何其他第三方的库。

当前片段：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 <div class="col-xs-4 mr-4">
 <ul class="list-group">
  <li class="list-group-item">List Item 1</li>
  <li class="list-group-item">List Item 2</li>
  <li class="list-group-item">List Item 3</li>
  <li class="list-group-item">List Item 4</li>
  <li class="list-group-item">List Item 5</li>
  <li class="list-group-item">List Item 6</li>
  <li class="list-group-item">List Item 7</li>
</ul>
 </div>
  <div class="col-xs-4 mr-4">
 Column-2
 </div>
 </div>
</div>

预期结果：

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
     <div class="row">
     <div class="col-xs-4 mr-4">
     <ul class="list-group">
       <li class="list-group-item">List Item 1</li>
       <li class="list-group-item">List Item 2</li>
       <li class="list-group-item">List Item 3</li>
       <li class="list-group-item">List Item 4</li>
       <li class="list-group-item">List Item 5</li>
    </ul>
     </div>
      <div class="col-xs-4 mr-4">
     <ul class="list-group">
       <li class="list-group-item">List Item 6</li>
       <li class="list-group-item">List Item 7</li>
    </ul>
     </div>
     </div>
    </div>

Answer 1

无法使用 CSS 将元素从一个 DOM 容器移动到另一个容器。

可以在单个容器中更改布局行为，而 CSS-Grid 可以做到这一点不需要固定高度.....使用显式和隐式网格。

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4 mr-4">
      <ul class="list-group">
        <li class="list-group-item">List Item 1</li>
        <li class="list-group-item">List Item 2</li>
        <li class="list-group-item">List Item 3</li>
        <li class="list-group-item">List Item 4</li>
        <li class="list-group-item">List Item 5</li>
        <li class="list-group-item">List Item 6</li>
        <li class="list-group-item">List Item 7</li>
        <li class="list-group-item">List Item 8</li>
        <li class="list-group-item">List Item 9</li>
        <li class="list-group-item">List Item 10</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

您可以使用 flexbox 实现这一点，但 flex 容器（在本例中为 .list-group）和 flex 项（.list-group-item）都需要具有明确的高度才能正确包装。

还有一点旁注：不要在 Bootstrap 4 中使用 col-xs，而是使用 col。

.list-group {
  height: 200px;
}

.list-group-item {
  height: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-4 mr-4">
    <ul class="list-group d-flex flex-column flex-wrap">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
  </div>
</div>