Question

我有两列的行，如下面的代码片段所示。在第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>

将超出列表的项目移至引导程序的下一列

2 个答案: