Исключить пункт меню из краха начальной загрузки 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>

Ответ 1

Ниже приведен пример, показывающий, как можно использовать любую конфигурацию NAVBAR для "ванильного бутстрапа", которую вы можете захотеть. Он включает название сайта, как сворачивающиеся, так и не сворачивающиеся элементы меню, выровненные влево или вправо, и статический текст. Обязательно прочитайте комментарии, чтобы получить более полное представление о том, что вы можете изменить. Наслаждайтесь!

Fiddle: 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>

Ответ 2

Вы должны иметь возможность использовать pull-left и pull-right в 2 nav-header, чтобы предотвратить слияние ссылок.

Смотрите: http://bootply.com/104747

  <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>

Ответ 3

Вот мой другой ответ в 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") 
                  | &nbsp;&nbsp;Profile
              li
                a(href="/logout", title="Logout")
                  | &nbsp;&nbsp;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