Question

在我的有角度的单页应用中，我有以下导航栏：

<nav class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <!--<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">-->
                <a class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#/">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="" data-toggle="dropdown">Customer Instances <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/itarList">iTAR</a></li>
                                <li class="divider"></li>
                                <li><a href="#/nonItarList">Non-iTAR</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Training & Documentation <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/videoTutorials">Video Tutorials</a></li>
                                <li><a href="#/taskBasedHelp">Task-Based Help</a></li>
                                <li class="divider"></li>
                                <li><a href="#/documentTemplates">Document Templates</a></li>
                                <li><a href="#/artifactSamples">Artifact Samples</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Service Requests <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/viewExistingRequests">View Existing Requests</a></li>
                                <li class="divider"></li>
                                <li><a href="#/enterNewRequest">Enter New Request</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Development Tracker <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/viewBacklogItems">View Backlog Items</a></li>
                                <li><a href="#/viewFeatureReleaseSchedule">View Feature Release Schedule</a></li>
                                <li class="divider"></li>
                                <li><a href="#/viewListOfSuggestedEnhancements">View List Of Suggested Enhancements</a></li>
                                <li><a href="#/suggetAnEnhancement">Suggest An Enhancement</a></li>
                                <li class="divider"></li>
                                <li><a href="#/viewActiveBugReports">View Active Bug Reports</a></li>
                                <li><a href="#/reportABug">Report A Bug</a></li>
                            </ul>
                        </li>
                        </ul>
                            <ul class="nav pull-right">
                                <li class="divider-vertical"></li>
                                <li class="dropdown">
                                    <a href="" class="dropdown-toggle" data-toggle="dropdown">Site Administration <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#/userAdministration">User Administration</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#/instanceAdministration">Instance Administration</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#/applicationAdministration">Application Administration</a></li>
                                    </ul>
                                </li>
                             </ul> 
                </div>
            </div>
        </div>
    </nav>

我需要阻止此导航栏与页面的其余部分一起滚动。当我尝试将navbar-fixed-top类属性添加到最顶层元素时，我确实得到了所需的结果，但是，我最右边的导航项（站点管理）正在向下移动（或包裹），整个导航栏高度的两倍。有没有办法实现这个无滚动的导航栏而没有这样的副作用？

Answer 1

您也可以尝试删除包裹导航栏的container div ..

http://bootply.com/113435

 <nav class="navbar navbar-fixed-top">
        <div class="navbar-inner">
                <!--<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">-->
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#/">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="" data-toggle="dropdown">Customer Instances <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/itarList">iTAR</a></li>
                                <li class="divider"></li>
                                <li><a href="#/nonItarList">Non-iTAR</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Training &amp; Documentation <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/videoTutorials">Video Tutorials</a></li>
                                <li><a href="#/taskBasedHelp">Task-Based Help</a></li>
                                <li class="divider"></li>
                                <li><a href="#/documentTemplates">Document Templates</a></li>
                                <li><a href="#/artifactSamples">Artifact Samples</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Service Requests <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/viewExistingRequests">View Existing Requests</a></li>
                                <li class="divider"></li>
                                <li><a href="#/enterNewRequest">Enter New Request</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Development Tracker <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#/viewBacklogItems">View Backlog Items</a></li>
                                <li><a href="#/viewFeatureReleaseSchedule">View Feature Release Schedule</a></li>
                                <li class="divider"></li>
                                <li><a href="#/viewListOfSuggestedEnhancements">View List Of Suggested Enhancements</a></li>
                                <li><a href="#/suggetAnEnhancement">Suggest An Enhancement</a></li>
                                <li class="divider"></li>
                                <li><a href="#/viewActiveBugReports">View Active Bug Reports</a></li>
                                <li><a href="#/reportABug">Report A Bug</a></li>
                            </ul>
                        </li>
                        </ul>
                            <ul class="nav pull-right">
                                <li class="divider-vertical"></li>
                                <li class="dropdown">
                                    <a href="" class="dropdown-toggle" data-toggle="dropdown">Site Administration <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                       ...
                                    </ul>
                                </li>
                             </ul> 
                </div>
        </div>
    </nav>

Answer 2

如果当前元素中没有空格，则元素将移动到新行。

你可以阻止他们这样做的唯一方法是在所需的线上为他们腾出空间。尝试稍微减小文本大小或删除一些水平边距。

请记住，任何人在比您更小的屏幕上访问您的网站，甚至在手机或平板电脑上访问您的网站时，也很可能会看到元素下降。

如何防止引导导航栏与页面的其余部分一起滚动

2 个答案: