angularjs bootstrap 下拉宽度问题

Question

这是我显示下拉菜单的代码。如何对齐下拉菜单，使其占据红线中显示的边框？。基本上我想增加下拉框的宽度。

<div class="dropdown">
    <button id="btn-append-to-single-button" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        {{ editUser.SelectedStatusName}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-left"  aria-labelledby="btn-append-to-single-button">
        <li ng-repeat="a in editUser.StatusList">
            <a ng-click="editUser.change(a)"> {{a.Name}}</a>
        </li>
    </ul>
</div>

Answer 1

就像为按钮定义 CSS 规则一样简单：

  <button style="width:(value that you want)" id="btn-append-to-single-button" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        {{ editUser.SelectedStatusName}} <span class="caret"></span>
  </button>

这是一个 js fiddle 显示带有 width:100% 的按钮： https://jsfiddle.net/x7253v4b/

angularjs bootstrap 下拉宽度问题

angularjs bootstrap dropdown width issue

angularjs

angular-ui-bootstrap

dropdown