Question

我目前正在使用Bootstrap 4的下拉列表。如何更改以下代码，以便单击按钮后显示的下拉菜单与按钮本身的宽度相同？

请注意，按钮的大小可以根据内部文本进行更改，我希望下拉菜单看起来与文本无关。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" 
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else
        here</a>
    </div>
</div>

https://jsfiddle.net/5mqg7dgv/

提前感谢您的帮助。

Answer 1

由于<div>是块级元素，它们会占用水平方向上的所有可用空间。因此，.w-100上的.dropdown-menu本身会将其边界扩展到父级的宽度，而父级的宽度不仅仅是按钮的可见部分。

解决此问题的一种方法是通过在.dropdown上应用.d-inline-block将<div class="dropdown d-inline-block"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu w-100" aria labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>渲染为内嵌块，如下所示：

＆＃13;

if($_GET['computerId'] = $_SESSION['computerId']) {
   echo 'You cannot book a computer that is already booked!';
}

＆＃13;

Bootstrap 4下拉按钮宽度

1 个答案: