时间戳

首页 > 解决方案 > 2列引导程序4中的列表组

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

问题描述

如何在引导程序 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>

所以它是

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

试试这个

<!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>

推荐阅读