Angular Bootstrap 导航栏组件位置

Question

我有一个 angular 页面，我希望在该页面顶部有一个固定的导航栏。左边是页面标题，中间是一些按钮，右边是下拉菜单。我正在使用 bootstrap 和 ui-bootstrap 并且我有一些导航栏，但我无法让下拉菜单向右移动。无论我尝试什么，它都停留在中间。 Here's a plunker 重现我的问题。我试过 text-align: right; 和 float:right; 但没有任何效果！

知道我做错了什么吗？还是有一个很好的例子可以满足我的要求？

Answer 1

尝试颠倒中心 div 和右侧 div 的顺序（浮动时顺序很重要），如下所示：

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <a class="navbar-brand page-scroll">Test</a>
        </div>

        <div class="navbar-header page-scroll navbar-right pull-right">
            <div class="btn-group" uib-dropdown>
                <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu"
                    uib-dropdown-menu role="menu"
                    aria-labelledby="btn-append-to-single-button">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
        <div class="float-center btn-group form-group row"
             data-toggle="buttons">
            <label ng-repeat="foo in ctrl.foos" class="btn btn-primary">
                <input type="radio"
                name="foo"> {{foo}}
            </label>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

此外，您可能希望为导航栏品牌的父元素提供 float: left 属性，这样它就不会跨越整个宽度。如果您想继续为您的中心元素使用相对定位，您将需要尝试使用这些值。左：-15% 对我有上述改变。

Answer 2

我从plunker看到的是下面的css打破了下拉列表的位置：

.float-center {
    float: right;
    left: -35%;
    margin: 4px;
}

可以完成两个简单的解决方案： 1.调换dropdonw按钮和中间按钮的位置，这里分叉link：https://plnkr.co/edit/HAAKWziKM3o6uBE6uZtq?p=preview

将float从right更改为left并修改left

希望对您有所帮助:)

Angular Bootstrap 导航栏组件位置

Angular Bootstrap Navbar component position

html

css

twitter-bootstrap

angularjs

angular-ui-bootstrap