Question

如何在引导程序4的2列中进行列表分组

<div class="categories">
    <h4>Categories</h4>
    <ul class="list-group">
      <li class="list-group-item active">Name 1</li>
      <li class="list-group-item">Name 2</li>
      <li class="list-group-item">Name 3</li>
      <li class="list-group-item">Name 4</li>
      <li class="list-group-item">Name 5</li>
      <li class="list-group-item">Name 6</li>
    </ul>
</div>

就是这样

Answer 1

尝试一下

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h4>Categories</h4>
        <div class="row">

            <div class="col">
                <ul class="list-group">
                    <li class="list-group-item active">Name 1</li>
                    <li class="list-group-item">Name 2</li>
                    <li class="list-group-item">Name 3</li>
                    <li class="list-group-item">Name 4</li>
                </ul>
            </div>
            <div class="col">
                <ul class="list-group">
                    <li class="list-group-item active">Name 1</li>
                    <li class="list-group-item">Name 2</li>
                    <li class="list-group-item">Name 3</li>
                    <li class="list-group-item">Name 4</li>
                    <li class="list-group-item">Name 5</li>
                    <li class="list-group-item">Name 6</li>
                </ul>
            </div>

        </div>
    </div>
</body>

</html>

2列引导程序4中的列表组

1 个答案: