Exclure l'élément de menu de l'effondrement de bootstrap 3 navbar

Voici ce que j'ai, j'ai essayé de me déplacer dans ma section à l'intérieur de la "marque" et de faire un pull-right, En dehors de la marque et en dehors de l'effondrement et de faire un pull-left/right, tout en essayant de le placer avant ou après la section d'effondrement.

Lorsque vous l'ajoutez à la section Marque, cela fonctionne, mais cela descend à une nouvelle ligne. Comment puis-je garder sur la même ligne?

    <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>
63
demandé sur ganders 2014-01-10 10:44:29

3 réponses

Voici un exemple qui montre comment avoir à peu près n'importe quel type de configuration de barre de navigation 'vanilla bootstrap' que vous pourriez vouloir. Il comprend un titre de site, les éléments de menu collapsing et non-collapsing alignés à gauche ou à droite, et le texte statique. Assurez-vous de lire les commentaires pour mieux comprendre ce que vous pouvez changer. Amusez-vous bien!

Violon: http://jsfiddle.net/nomis/n9KtL/1/

Jouer avec clearfix et options étendues sur le côté gauche comme d'habitude: 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>
78
répondu nomis 2017-07-28 23:03:34

Vous devriez pouvoir utiliser pull-left et pull-right dans 2 nav-header pour empêcher le lien de s'effondrer.

Voir: 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>
24
répondu Zim 2014-11-06 19:59:17

Voici mon autre réponse en Jade avec une logique de modèle juste pour le plaisir :). Voir l'autre réponse pour plus d'informations. 

//- 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
3
répondu nomis 2014-04-10 05:25:40