这就是我所拥有的，我尝试在“品牌”内部移动我的部分，并在品牌外部和折叠之外进行向右拉动，并向左/向右拉动，同时还尝试将其放置在之前或之后崩溃部分。
将其添加到“品牌”部分时，它可以工作，但会下降到新的一行。如何保持同一行？
<body> <header> <nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">@Html.ActionLink("Manager", "Index", "Player")</div> </div> <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> <ul class="nav navbar-nav"> @* <li class="active">@Html.ActionLink("Home", "Index", "Player")</li> <li class="active">@Html.ActionLink("Match", "Index", "Match")</li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a> <ul class="dropdown-menu"> <li>@Html.ActionLink("Change Password", "ManagePassword", "Account")</li> <li>@Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li> <li>@Html.ActionLink("Log Off", "LogOff", "Account")</li> </ul> </li> </ul> </div> <div> <!-- I don't want it apart of the collapsible portion --> <div class="navbar-right"> <ul class="nav navbar-nav"> <li class="active">@Html.ActionLink("Match", "Index", "Match")</li> </ul> </div> </div> </div> </nav> </header>
下面的示例显示了如何具有您可能需要的几乎所有类型的“香草引导程序” NAVBAR配置。它包括一个站点标题，向左或向右对齐的折叠和非折叠菜单项以及静态文本。请务必阅读评论，以更全面地了解您可以更改的内容。请享用！
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Title --> <div class="navbar-header pull-left"> <a href="/" class="navbar-brand">GNOMIS</a> </div> <!-- 'Sticky' (non-collapsing) right-side menu item(s) --> <div class="navbar-header pull-right"> <ul class="nav pull-left"> <!-- This works well for static text, like a username --> <li class="navbar-text pull-left">User Name</li> <!-- Add any additional bootstrap header items. This is a drop-down from an icon --> <li class="dropdown pull-right"> <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="/users/id" title="Profile">Profile</a> </li> <li> <a href="/logout" title="Logout">Logout </a> </li> </ul> </li> </ul> <!-- Required bootstrap placeholder for the collapsed menu --> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <!-- The Collapsing items navbar-left or navbar-right --> <div class="collapse navbar-collapse navbar-left"> <!-- pull-right keeps the drop-down in line --> <ul class="nav navbar-nav pull-right"> <li><a href="/news">News</a> </li> <li><a href="/Shop">Shop</a> </li> </ul> </div> <!-- Additional navbar items --> <div class="collapse navbar-collapse navbar-right"> <!-- pull-right keeps the drop-down in line --> <ul class="nav navbar-nav pull-right"> <li><a href="/locator">Locator</a> </li> <li><a href="/extras">Extras</a> </li> </ul> </div> </div> </nav>
