jquery - 如何使固定顶部 Bootstrap 菜单背景只粘在右边或左边？

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

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

Answer 1

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