2017-06-14 8 views
0

は、私はブートストラップ4ナビゲーション含ん次のヘッダー、している:私は、ナビゲーション項目に望んでいたことから、私はいくつかの変更を加えたブートストラップ4ナビゲーション - モバイルビュー

<div class="header container-fluid"> 

    <div class="row"> 



<div class="brand col-sm-10 offset-sm-1"> 
    Logo 
</div> 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav mx-auto"> 

     <li class="nav-item active"> 
     <a class="nav-link" href="#">Welcome<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Pricing 
     </a> 

     <div class="dropdown-menu" aria-labelledby="dropdown_angebot"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_unternehmen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Our Company 
     </a> 

     <div class="dropdown-menu" aria-labelledby="dropdown_unternehmen"> 
      <a class="dropdown-item" href="#">History</a> 
      <a class="dropdown-item" href="#">Career</a> 
      <a class="dropdown-item" href="#">Clients</a> 
     </div> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="#">Get here<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="#">Contact<span class="sr-only">(current)</span></a> 
     </li> 
    </ul> 
    </div> 
</nav> 

    </div> 
</div> 

が中心と非常にストレッチします行/列の始まり。しかし、今では私のモバイルナビゲーションはもはや動かず、私はそれがなぜか分からない。ここで

はSASSは私のナビゲーションのためである:ここでは

.brand { 
    display: flex; 
    justify-content: center; 
    align-items: center; 

    height: 100px; 
} 

.navbar { 
    height: 50px; 
    background-color: white !important; 
    padding: 0 !important; 

    .navbar-nav { 
     display: table; 
     width: 100%; 
     list-style: none; 

     .nav-link { 
     padding: 0 !important; 
     } 

     li { 
     display: table-cell; 
     text-align: center; 

     a { 
      // background-color: yellow; 
      display: block; 

     } 

     } 

     li:first-child { 
     text-align: left; 
     } 

     li:last-child { 
     text-align: right; 
     } 




    .nav-item { 
     // margin: 30px; 

    } 
    } 
} 

はjsfiddleです: https://fiddle.jshell.net/fmz6hafz/

すべてが今もモバイルビューでは、水平に配向されます。これを元に戻し、元のブートストラップモバイルビューを元に戻すにはどうすればよいですか?

+0

あなたはフィドルhttps://fiddle.jshell.net – Omi

+0

を作成してくださいすることができます私は私のポストを編集しました! :) –

答えて

0

私はこれがあなたの望むものだと思います。

あなたは、これは、CSS /*background-color: yellow;*/他の削除不要なコードにコメントするには、次のように使用する必要があります

a { 
     // background-color: yellow; 
     display: block; 

    } 

使用を参照してください、その行から、あなたのCSSを失敗の原因となっているCSSファイル//にコメントするには間違ったsyantaxを使用していました。

.brand { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 

 
    height: 100px; 
 
} 
 

 
.navbar { 
 
    height: 50px; 
 
    background-color: white !important; 
 
    padding: 0 !important; 
 

 
    .navbar-nav { 
 
     display: table; 
 
     width: 100%; 
 
     list-style: none; 
 

 
     .nav-link { 
 
     padding: 0 !important; 
 
     } 
 

 
     li { 
 
     display: table-cell; 
 
     text-align: center; 
 

 
     a { 
 
     
 
      display: block; 
 

 
     } 
 

 
     } 
 

 
     li:first-child { 
 
     text-align: left; 
 
     } 
 

 
     li:last-child { 
 
     text-align: right; 
 
     } 
 

 

 

 

 
    .nav-item { 
 
      
 
    } 
 
    } 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
<body> 
 
<div class="header container-fluid"> 
 

 
    <div class="row"> 
 

 

 

 
<div class="brand col-sm-10 offset-sm-1"> 
 
    Logo 
 
</div> 
 

 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1"> 
 

 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
    <ul class="navbar-nav mx-auto"> 
 

 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Welcome<span class="sr-only">(current)</span></a> 
 
     </li> 
 

 
     <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      Pricing 
 
     </a> 
 

 
     <div class="dropdown-menu" aria-labelledby="dropdown_angebot"> 
 
      <a class="dropdown-item" href="#">Action</a> 
 
      <a class="dropdown-item" href="#">Another action</a> 
 
      <a class="dropdown-item" href="#">Something else here</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_unternehmen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      Our Company 
 
     </a> 
 

 
     <div class="dropdown-menu" aria-labelledby="dropdown_unternehmen"> 
 
      <a class="dropdown-item" href="#">History</a> 
 
      <a class="dropdown-item" href="#">Career</a> 
 
      <a class="dropdown-item" href="#">Clients</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Get here<span class="sr-only">(current)</span></a> 
 
     </li> 
 

 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Contact<span class="sr-only">(current)</span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
    </div> 
 
</div> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </body>

+0

あなたは正確にあなたが何を変えたのか記述できますか?結果は私の望むもののように見えますが、マシンに実装すると変わらず、すべて水平です。 –

+0

私はただコメント付きのCSSを取り除いただけで何もしなかった、 '/'これはcssの有効なコメント構文ではありません。コメントには '/ * * /'を使います – Omi

関連する問題