Question

尝试使btn-group-justified正常工作，以便按钮填充单元格的宽度。它适用于单个按钮，但在使用下拉按钮时则不行。按钮显示正常，但单击时，按钮的宽度消失。

代码：

  <div class="btn-group-justified">
    <a type="button" class="btn-block btn btn-success dropdown-toggle" data-toggle="dropdown">
        Right dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" style="min-width: 0px" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Answer 1

您应该使用简单的下拉元素，并在right: 0上添加.dropdown-menu：

<div class="dropdown dropdown-justified"> <!-- custom .dropdown-justified class -->
    <a class="btn-block btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>

.dropdown-justified .dropdown-menu {
    right: 0;
}

<强> Bootply

下拉单击时，Bootstrap按钮会丢失宽度

1 个答案: