angularjs bootrap下拉宽度问题

时间:2017-05-24 14:39:04

标签: angularjs angular-ui-bootstrap dropdown

这是我显示下拉列表的代码。如何对齐下拉列表以使其占据RED线所示的边框?基本上我想增加下拉框的宽度。

<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>

enter image description here

由于

1 个答案:

答案 0 :(得分:0)

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

<script>
// current page highlight
    $(document).ready(function() {
       $('a[href]:not([href=#])').each(function(){
            if(window.location.href.indexOf($(this).attr('href')) > -1){
               $(this).addClass('active');
            }
       });
    });
</script>

这是一个js小提琴,显示带 <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> 的按钮: https://jsfiddle.net/x7253v4b/