Question

我是Bootsrap 4的新手，我希望适合div中的下拉菜单。我已经用Bootstrap 4编写了以下代码来实现上述功能，但是它不起作用：

<div class="p-2 bg-info col-md-4">
     <div class="dropdown">
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown
         </button>
         <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link
               2</a> <a class="dropdown-item" href="#">Link 3</a>
         </div>
    </div>
</div>

Answer 1

使用w-100和dropdown-menu上的Bootstrap 4 btn-block实用工具类使按钮全宽...

<div class="p-2 bg-info col-md-4">
     <div class="dropdown">
         <button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown">
                Dropdown
         </button>
         <div class="dropdown-menu w-100">
               <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link
               2</a> <a class="dropdown-item" href="#">Link 3</a>
         </div>
    </div>
</div>

https://www.codeply.com/go/H1QUpWhQZD

另请参阅：
How to make width of dropdown-menu equal to width of it's parent in bootstrap 4
How to make a Bootstrap 4 full width dropdown in Navbar?

如何在div bootstrap 4中适应下拉列表

1 个答案: