web-dev-qa-db-fra.com

Exclure l’élément de menu de la réduction de bootstrap 3 barre de navigation)

Voici ce que j'ai, j'ai essayé de déplacer ma section à l'intérieur de la "marque" et faire un pull-right, en dehors de la marque et en dehors de l'effondrement et 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 de la marque, cela fonctionne, mais cela passe à une nouvelle ligne. Comment puis-je le 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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
65
ganders

Vous trouverez ci-dessous un exemple qui montre comment utiliser n'importe quel type de configuration NAVBAR 'bootable vanilla'. Il comprend un titre de site, des éléments de menu réducteurs et non réducteurs alignés à gauche ou à droite, ainsi que du texte statique. Assurez-vous de lire les commentaires pour mieux comprendre ce que vous pouvez changer. Prendre plaisir!

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

Violon avec clearfix et options étendues sur le côté gauche comme d'habitude: http://jsfiddle.net/jgoemat/u1j8o0n3/1/

@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>
78
nomis

Vous devriez pouvoir utiliser pull-left et pull-right en 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>
26
Zim

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

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