Исключить пункт меню из сворачивания bootstrap 3 navbar
вот что у меня есть, я пробовал перемещаться по своей секции внутри "бренда" и делать вытягивание вправо, вне бренда и вне коллапса и делать вытягивание влево/вправо, а также пытаться разместить его до или после секции коллапса.
при добавлении его в раздел бренда он работает, но он переходит к новой строке. Как я могу держать его на одной линии?
<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>
3 ответов:
Ниже приведен пример, который показывает, как иметь практически любую конфигурацию NAVBAR "vanilla bootstrap", которую вы можете захотеть. Он включает заголовок сайта, как сворачивающиеся, так и не сворачивающиеся пункты меню, выровненные слева или справа, и статический текст. Обязательно прочитайте комментарии, чтобы получить более полное представление о том, что вы можете изменить. Наслаждайтесь!
Скрипка:http://jsfiddle.net/nomis/n9KtL/1/
Скрипка с clearfix и расширенными опциями на левой стороне, как нормальный: http://jsfiddle.net/jgoemat/u1j8o0n3/1/
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<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>
вы должны быть в состоянии использовать
pull-leftиpull-rightв 2nav-header' s, чтобы предотвратить разрушение ссылки.<nav class="navbar navbar-default navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header pull-left"> <div class="navbar-brand">Brand</div> </div> <!-- I don't want it apart of the collapsible portion --> <div class="navbar-header pull-right"> <ul class="nav navbar-nav pull-left"> <li class="active"><a href="">No Collapse</a> </li> </ul> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a> <ul class="dropdown-menu"> <li>Change Password</li> <li>Update Profile Info</li> <li>Log Off</li> </ul> </li> </ul> </div> </div> </nav>
вот мой другой ответ в Jade с некоторой шаблонной логикой просто для удовольствия :). Дополнительную информацию см. в другом ответе.
//- NOTE: 'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own nav(class="navbar navbar-default navbar-fixed-top", role="navigation") .container //- Title .navbar-header.pull-left a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS //- 'Sticky' (non-collapsing) right-side menu item(s) .navbar-header.pull-right ul.nav.pull-left //- This works well for static text, maybe some initials li.navbar-text.pull-left User Name //- User Icon drop-down menu li.dropdown.pull-right a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;") span.glyphicon.glyphicon-user b.caret ul.dropdown-menu li a(href="/users/id", title="Profile") | Profile li a(href="/logout", title="Logout") | Logout //- Required bootstrap placeholder for the collapsed menu button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') span.sr-only Toggle navigation span.icon-bar span.icon-bar span.icon-bar //- The Collapsing items navbar-left or navbar-right .collapse.navbar-collapse.navbar-left //- pull-right keeps the drop-down in line ul.nav.navbar-nav.pull-right li a(href="/news") News li a(href="/shop") Shop //- Additional navbar items .collapse.navbar-collapse.navbar-right //- pull-right keeps the drop-down in line ul.nav.navbar-nav.pull-right li a(href="/locator") Locator li a(href="/extras") Extras
Comments