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

Question

我想在引导程序中制作固定的顶部菜单，它仅在浏览器中

粘滞。

<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 中，并且导航背景会粘

性很好？

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

Answer 1

如果我正确理解并且您想创建背景粘在浏览器边缘右侧并且左侧粘在父容器上的菜单，您应该将同级添加到菜单，将父位置设置为相对，新创建的应该有位置：绝对，之后如果您设置顶部：0 和右侧： 0 - （li的宽度）和适当的宽度（以%为单位）和元素的高度，它将覆盖浏览器边缘和右侧之间的所有空间。我认为它应该解决你的问题。祝你好运:)

Answer 2

如果我

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

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

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