2017-08-11 17 views
0

この質問はすでに質問されていますが、私の問題は少し異なります。私はサイズを変更navBarのサイズ変更

Bootstrap menu (nav) collapse horizontally instead of vertical

Change bootstrap navbar collapse breakpoint without using LESS

、ナビゲーションバーが崩壊。しかし、ボタンのアイコンをクリックすると、横のメニューが表示されます。 はここに写真です: enter image description here

enter image description here

がここに私のコードです。

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div> 
<div> 
    <div class="jumbotron" style="padding: 0px"> 
     <div class="card fancy-card"> 
<div class="card"> 
    <div class="container"> 
     <nav class="navbar navbar-default" style="background-color: lightskyblue"> 
      <div class="container-fluid"> 

       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand sr-only" href="#">Menu</a> 
      </div> 

      <!--class="collapse navbar-collapse" to hide some elts of menu--> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 

            <li> 
             <a routerLink="/home/accueil" routerLinkActive="active">home</a> 
            </li> 
            <li> 
             <a href="javascript:void(0)" 
             class="dropdown-toggle" 
             data-toggle="dropdown">Item1<span class="caret"></span></a> 
             <ul class="dropdown-menu"> 
              <li><a routerLink="/home/item11" routerLinkActive="active">Item11</a> 
              </li> 
              <li><a routerLink="/home/item12" 
              routerLinkActive="active">Item12</a></li> 
             </ul> 
            </li> 
            <li> 
             <a href="javascript:void(0)" 
             class="dropdown-toggle" 
             data-toggle="dropdown">Item2<span class="caret"></span></a> 
             <ul class="dropdown-menu"> 
              <li><a routerLink="/home/item21" routerLinkActive="active">Item21</a> 
              </li> 
              <li><a routerLink="/home/item21" routerLinkActive="active">Item22</a> 
              </li> 
             </ul> 
            </li> 
            <li> 
             <a href="javascript:void(0)" 
             class="dropdown-toggle" 
             data-toggle="dropdown">Item3<span class="caret"></span></a> 
             <ul class="dropdown-menu"> 
              <li><a routerLink="/home/item31" routerLinkActive="active">Item31</a> 
              </li> 
              <li><a routerLink="/home/item32" routerLinkActive="active">Item32</a> 
              </li> 
             </ul> 
            </li> 

            <li> 
             <a routerLink="/home/account" routerLinkActive="active">Account</a> 
            </li> 

           </ul> 

           <ul class="nav navbar-nav navbar-right"> 
            <li><input value="Déconnexion" (click)="logout()" type="submit"/></li> 
           </ul> 

          </div> 
         </div> 
        </nav> 

       </div> 
      </div> 
      </div> 
      </div> 
      </div> 
</div> 

</body> 
+1

可能性が働いてスニペットを追加した場合、関連するコードを提供します。 –

+0

私はcodepenにあなたのコードを貼り付け、それは私のために正常に動作します。 – Czeran

+0

@Czeran、私の問題は、私が使用しているブートストラップとjqueryのバージョンに関連しているのだろうか?私はその質問を編集しました。それが事実かどうか教えてください。 – edkeveked

答えて

0

これはそうしたブートストラップではありません。メニューを水平にする他のCSSがあります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="card"> 
 
    <div class="container"> 
 
     <nav class="navbar navbar-default" style="background-color: lightskyblue"> 
 
      <div class="container-fluid"> 
 

 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
 
        data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand sr-only" href="#">Menu</a> 
 
      </div> 
 

 
      <!--class="collapse navbar-collapse" to hide some elts of menu--> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav"> 
 

 
            <li> 
 
             <a routerLink="/home/" routerLinkActive="active">home</a> 
 
            </li> 
 
            <li> 
 
             <a href="javascript:void(0)" 
 
             class="dropdown-toggle" 
 
             data-toggle="dropdown">Item1<span class="caret"></span></a> 
 
             <ul class="dropdown-menu"> 
 
              <li><a routerLink="/home/item11" routerLinkActive="active">Item11</a> 
 
              </li> 
 
              <li><a routerLink="/home/item12" 
 
              routerLinkActive="active">Item12</a></li> 
 
             </ul> 
 
            </li> 
 
            <li> 
 
             <a href="javascript:void(0)" 
 
             class="dropdown-toggle" 
 
             data-toggle="dropdown">Item2<span class="caret"></span></a> 
 
             <ul class="dropdown-menu"> 
 
              <li><a routerLink="/home/item21" routerLinkActive="active">Item21</a> 
 
              </li> 
 
              <li><a routerLink="/home/item21" routerLinkActive="active">Item22</a> 
 
              </li> 
 
             </ul> 
 
            </li> 
 
            <li> 
 
             <a href="javascript:void(0)" 
 
             class="dropdown-toggle" 
 
             data-toggle="dropdown">Item3<span class="caret"></span></a> 
 
             <ul class="dropdown-menu"> 
 
              <li><a routerLink="/home/item31" routerLinkActive="active">Item31</a> 
 
              </li> 
 
              <li><a routerLink="/home/item32" routerLinkActive="active">Item32</a> 
 
              </li> 
 
             </ul> 
 
            </li> 
 

 
            <li> 
 
             <a routerLink="/home/account" routerLinkActive="active">Account</a> 
 
            </li> 
 

 
           </ul> 
 

 
           <ul class="nav navbar-nav navbar-right"> 
 
            <li><input value="Déconnexion" (click)="logout()" type="submit"/></li> 
 
           </ul> 
 

 
          </div> 
 
         </div> 
 
        </nav> 
 

 
       </div> 
 
      </div>

0

これを試してみてください:

<nav class="navbar navbar-default" style="background-color: lightskyblue"> 
     <div class="container-fluid"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
       data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand sr-only" href="#">Menu</a> 
     </div> 

     <!--class="collapse navbar-collapse" to hide some elts of menu--> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 

           <li> 
            <a routerLink="/home/" routerLinkActive="active">home</a> 
           </li> 
           <li> 
            <a href="javascript:void(0)" 
            class="dropdown-toggle" 
            data-toggle="dropdown">Item1<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a routerLink="/home/item11" routerLinkActive="active">Item11</a> 
             </li> 
             <li><a routerLink="/home/item12" 
             routerLinkActive="active">Item12</a></li> 
            </ul> 
           </li> 
           <li> 
            <a href="javascript:void(0)" 
            class="dropdown-toggle" 
            data-toggle="dropdown">Item2<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a routerLink="/home/item21" routerLinkActive="active">Item21</a> 
             </li> 
             <li><a routerLink="/home/item21" routerLinkActive="active">Item22</a> 
             </li> 
            </ul> 
           </li> 
           <li> 
            <a href="javascript:void(0)" 
            class="dropdown-toggle" 
            data-toggle="dropdown">Item3<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a routerLink="/home/item31" routerLinkActive="active">Item31</a> 
             </li> 
             <li><a routerLink="/home/item32" routerLinkActive="active">Item32</a> 
             </li> 
            </ul> 
           </li> 

           <li> 
            <a routerLink="/home/account" routerLinkActive="active">Account</a> 
           </li> 

          </ul> 

          <ul class="nav navbar-nav navbar-right"> 

            <li><input value="Déconnexion" (click)="logout()" type="submit"/></li> 

          </ul> 

         </div> 
        </div> 
       </nav> 
+0

何も変わっていません。また、私のスタイリングを壊す – edkeveked

関連する問題