私は自分用のウェブサイトを作っています。私はブートストラップグリッドに問題があり、モバイル画面でメニューが反応するようになっています。レスキューメニューの整列右ブートストラップ
フルスクリーン画像:Full screen - menu bar
私は、メニューの応答性のデザインを書くことができました。しかし、リスケールするときにメニュー項目に問題があるようです。彼らはメニューの下で整列しません。 (Preferebly私はそれらがすべてを押し下げるのではなく、下の画像の上にマウスを置くことを望むだろう)。
モバイル画面:すべての助けを事前にMenu items not aligned with collapsed menu.
感謝。私が何らかのルールに違反している場合は、正しい方向に私を指摘してください。
敬具、
/* Lay-out: Header*/
.header-row {
display: flex;
align-items: center;
}
.nav-no-mar-pad {
margin: 0;
padding: 0;
}
.navbar-toggle {
border: #022F40 solid 1px;
margin: 8px 4px 8px 45px;
text-align: right;
}
.icon-bar {
border: #022F40 solid 1px;
}
.navbar-nav li a {
margin-right: 0;
text-align: center;
width: 90px;
padding: 10px 10px;
}
/* --- End --- */
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<div class="header">
<div class="container-fluid background-white">
<div class="row header-row">
<div class="col-lg-5">
<img id="header-logo" class="img-responsive" src="http://placehold.it/325x75">
</div>
<div class="col-xs-6 col-md-offset-1" style="padding-right: 0">
<nav class="navbar navbar-right nav-no-mar-pad">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About me</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>