1
モバイルデバイス上のグループメニューを表示するのにNavbar-toggleを使用しますが、動作しません。何が問題ですか？以下は私のコードとJsFiddleです。 実際にクラスを与えるときnavbar-toggleボタンが消える！ブートストラップ - Navbarトグルが表示されない
HTML：
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-right navbar-nav navbar-collapse collapsed" id="menu">
<li class="active" id="home"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tel</a></li>
</ul>
<img id="logo" src="images/logo.png" class="img-responsive">
</nav>
CSS：
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f7f7f7;
box-shadow: 0 4px 2px -2px #dedede;
}
.navbar-nav > li:first-child > a{
background-color: #01a89e;
color: white;
}
.navbar-nav > li:first-child a:hover, .navbar-nav > li:first-child a:active {
background-color: #01a89e;
}
.navbar-nav li a:hover{
background-color: #dedede;
}
.navbar-nav{
margin-top: -1px;
}
.navbar-nav li:not(:first-child){
border-left: 1px solid #dedede;
margin-bottom: -3px;
}
.navbar-nav li:hover{
/*border: none;*/
}
.navbar-nav li a{
color: #606060;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: -3px;
}
#logo{
width: 120px;
}
navbar-defaultはnav要素のクラスがなく、表示ボタンを追加してトグルするだけで、デフォルトの色をオーバーライドすることもできます。 [JSFiddle]（https://jsfiddle.net/06odccmc/2/） –
@JackRyder大変ありがとうございますが、デフォルトでは、メニューは折りたたまれていませんが、私は 'ul'タグに' collapsed'クラスを与えました。どうすれば修正できますか？ – soheil
私はulをdivに入れ、コンテナにクラス「navbar-collapse collapse」を与えました。デフォルトで折り畳まれています。 –