Angular Bootstrap Navbar 组件位置答案

【问题标题】：Angular Bootstrap Navbar component positionAngular Bootstrap Navbar 组件位置
【发布时间】：2016-04-15 00:18:14
【问题描述】：

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

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

【问题讨论】：

找出不同的方法：.float-center

标签： html css angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案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% 对我进行了上述更改。

【讨论】：

哇不知道关于订购。这解决了我的问题。谢谢！

【解决方案2】：

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

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

有两个简单的解决方案： 1.切换dropdonw按钮和中间按钮的位置，这里分叉链接：https://plnkr.co/edit/HAAKWziKM3o6uBE6uZtq?p=preview

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

希望对你有帮助:)

【讨论】：