html - Bootstrap 4 下拉按钮宽度

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> s 是 block 级元素，它们水平占据所有可用空间。所以，.w-100在 .dropdown-menu 上本身将其边界扩展到父级的宽度，这不仅仅是按钮的可见部分。

解决这个问题的一种方法是渲染 .dropdown通过应用 .d-inline-block 作为内联 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>