Question

我想在bootstrap中制作固定的顶级菜单，它只在浏览器中粘贴。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

                            <a href="#" title="website" rel="home" class="navbar-brand">Logo</a>

                        </div>

                        <div class="navbar-collapse collapse"><ul id="main-menu" class="nav navbar-nav"><li id="menu-item-421" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-421"><a href="#">History</a></li>
<li id="menu-item-410" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-408 current_page_item active menu-item-410 active "><a href="#">Offer</a></li>
<li id="menu-item-404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-404"><a href="#">About</a></li>
<li id="menu-item-28" class="homePage menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">HOME PAGE</a></li>
<li id="menu-item-21" class="info-contact menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#">Contact</a></li>
<li id="menu-item-23" class="info-help menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="#">Help</a></li>
<li id="menu-item-333" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-333"><a href="#">Order</a></li>
</ul></div>                 </div><!-- .col-md-12 -->
                </div><!-- row -->
            </div><!-- container -->
        </nav>

我在导航中使用类.container-fluid来做到这一点，但是当我改变窗口大小时，导航看起来很糟糕。我怎么能做导航项目将像内容一样在.container中，导航背景会粘到te？

我的菜单看起来像这样的代码： http://codepen.io/anon/pen/raeXxo

Answer 1

如果我理解你的问题，我认为你正在寻找navbar-right课程。将您的ul元素编辑为以下内容：

<ul id="main-menu" class="nav navbar-nav navbar-right">

现在菜单应固定在屏幕右侧。

Answer 2

如果我正确理解并且你想创建菜单哪个背景粘在浏览器边缘的右边并且左边粘贴到父容器你应该添加兄弟到菜单，将父位置设置为亲，新创建的应该有position：absolute和之后如果你设置top：0和right：0 - （li的宽度）和适当的宽度（％），以及元素的高度它将覆盖浏览器边缘之间的所有空间。我认为它应该可以解决你的问题。祝你好运：）

如何使固定顶部引导菜单背景只向右或向左粘？

2 个答案: