html - Bootstrap 4 : How to horizontally align elements inside a drop-down?

Question

我有一个 dropdown，里面有 3 个主要“类别”，每个“类别”都有几个复选框(这用于过滤搜索)。 这是一个例子:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <h6 class="dropdown-header">Category 1:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 2:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 3:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>
    </div>
</div>

我希望 3 个“类别”并排放置，但是，默认情况下，在 Bootstrap 的 dropdown 类中，它们显示为垂直堆栈。 我试图通过将 row 类添加到 dropdown 并为每个主要“类别”创建 col-4 来利用网格系统"但结果为空。我怎样才能将它们并排放置，让每一个都在下面有自己的复选框？

Answer 1

将所有内容打包成一个<div class="dropdown-item"> .然后放一个.row里面放 3 .col在那一排里面。最后，将每个列表组(包括标题)放入相应的列中。

点击下面的“运行代码片段”按钮并展开到整页:

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h6>Category 1:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 2:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 3:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

注意:您需要替换 a带有 label 的标签s 用于复选框，以便它们触发复选框打开或关闭。