2016-09-03 14 views
0

ブートストラップ4例Bootstrap 4のnavbarメニュー(モバイル)スタイルはBootstrap 3のようですか?

enter image description here

ブートストラップ3例ブートストラップ3のようにブートストラップ4メニューを取得する方法

enter image description here

?あなたはメディアを追加する必要があるので、あなたはさまざまなサイズでメニューを切り替えることができますので、あなたは、ブートストラップ4にいくつかのCSSを追加する必要があると私は、彼らがこれをやっていると想像

<div class="container"> 
     <nav class="navbar navbar-light bg-faded"> 
     <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header"> 
      &#9776; 
     </button> 
     <div class="collapse navbar-toggleable-xs" id="navbar-header"> 
      <a class="navbar-brand" href="#">Navbar</a> 
      <ul class="nav navbar-nav"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Features</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Pricing</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">About</a> 
      </li> 
      </ul> 
      <form class="form-inline pull-xs-right"> 
      <input class="form-control" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success" type="submit">Search</button> 
      </form> 
     </div> 
     </nav> <!-- /navbar --> 
</div><!-- /container --> 
+0

のためのいくつかのカスタムスタイルとフィドルはあなたのコードを教えてくださいです。 –

+0

ブートストラップのサンプルです。[リンク](http://v4-alpha.getbootstrap.com/examples/navbar/) –

答えて

2

:ブートストラップ4 http://v4-alpha.getbootstrap.com/examples/navbar/から

このコードあなたがあなたのメニューを開くためにあなたが望むどんなサイズにでも照会してください。そのような何か:

ここでは、ブートストラップ4ナビゲーションバーBootstrap 4 Navbar Fiddle

@media(max-width:33.9em) { 
    .navbar .collapse {max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;} 
    .navbar .navbar-brand {float:none;display: inline-block;} 
    .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;} 
    .navbar .navbar-nav {float:none !important;} 
    .nav-item{width:100%;text-align:left;} 
    .navbar .collapse .dropdown-menu { 
    position: relative; 
    float: none; 
    background:none; 
    border:none; 
    } 
} 
+0

ありがとう!これはうまくいった。選択したメニュー項目の背景を追加する方法は? –