は、私はブートストラップ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/
すべてが今もモバイルビューでは、水平に配向されます。これを元に戻し、元のブートストラップモバイルビューを元に戻すにはどうすればよいですか?
あなたはフィドルhttps://fiddle.jshell.net – Omi
を作成してくださいすることができます私は私のポストを編集しました! :) –