web-dev-qa-db-ja.com

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

以下は、ほぼあらゆる種類の 'Vanilla bootstrap' NAVBAR構成を必要とする方法を示す例です。これには、左または右に配置された折りたたみおよび非折りたたみの両方のメニュータイトル、および静的テキストが含まれます。コメントを読んで、変更できる内容を十分に理解してください。楽しい!

フィドル: http://jsfiddle.net/nomis/n9KtL/1/

通常のように左側にclearfixと拡張オプションをいじる: 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

2 pull-leftpull-rightnav-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>
26
Zim

楽しみのためにテンプレートロジックを使用した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
3
nomis