Question

尝试创建这样的列表：

https://i.gyazo.com/e9dfcd50b50670d4c9e0be94a4013c59.png

我正在使用Bootstrap并尝试过这样的代码，但是没有用：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-12 flex-wrap flex-row flex-wrap justify-start items-start">
    <ul class="d-flex flex-wrap list-unstyled">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

Answer 1

默认情况下，Bootstrap中的伸缩容器的方向设置为row。为了实现所需的行为，必须通过附加Bootstrap类ul来将column设置为flex-column的方向。您还需要设置此容器的高度，否则元素将不需要换行到新的列。

下面是说明如何执行此操作的代码段，请注意，这里还有一些其他样式仅用于显示目的：

ul {
    width: 200px;
    height: 150px;
    border: 1px solid black;
    box-sizing: content-box;
}

li {
    width: 100px;
    height: 30px;
}
    
li:nth-child(2n) {
    background-color: lightgrey;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-12 flex-wrap flex-row flex-wrap justify-start items-start">
    <ul class="d-flex flex-wrap list-unstyled flex-column">
        <li>Test 0</li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
        <li>Test 7</li>
        <li>Test 8</li>
        <li>Test 9</li>
    </ul>
</div>

Answer 2

您需要基于最大高度。例如，假设您想要100％的视口高度，请使用flexbox方向列和flex-wrap：

   ul {
      max-height: 100vh;
   }

   <div class="col-md-12">
        <ul class="d-flex flex-column flex-wrap list-unstyled" id="list">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test</li>
            ...
        </ul>
    </div>

演示：https://codeply.com/p/5CBPWc59O8

创建一个水平包装的垂直列表

2 个答案: