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作为复选框，以便他们触发或关闭复选框。

Bootstrap 4：如何在下拉列表中水平对齐元素？

1 个答案: