メニューが折りたたまれていても、常にナビゲーションバーに表示される要素が必要です。ブートストラップnavbar - デスクトップと携帯の両方で要素を整列する
私は、標準のナビゲーションバー-BAVクラスを使用します。
<ul class="nav navbar-nav pull-right">
<li>
<div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div>
</li>
</ul>
https://codepen.io/pepe007/pen/pwmyxZ
問題：私はdiv要素の#messageが、大小両方の画面上のメニューに左表示させたいです。
要素を並べ替えることができます。フレックス行に配置し、メールアイコンの上にmargin-left: autoを押して、右にメニュー/ドロップダウンボタンを押します。このよう
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/4db07c8d8d.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<style>
#logo {
width: 250px;
background: deepskyblue;
}
#popups {
padding-right: 15px;
}
#user {
display: inline;
background: olivedrab;
padding: 15px;
}
#message {
display: inline;
background: lightcoral;
padding: 15px;
}
.message {
margin-left: auto;
}
.navbar-header, .navbarContainer {
display: flex;
align-items: flex-start;
}
.container > .navbar-header {
margin-right: 0;
}
.navbar-nav {
margin: 0 0 0 auto;
}
.fa-envelope {
font-size: 14px;
}
.nb {
display: flex;
align-items: flex-end;
flex-direction: column;
}
</style>
<nav class="navbar navbar-default">
<div class="container navbarContainer">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="logo">Brand</a>
<ul class="nav pull-left">
<li>
<div id="user" class="pull-left"><i class="fa fa-user"></i> User</div>
</li>
</ul>
</div>
<ul class="nav navbar-nav message">
<li>
<div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div>
</li>
</ul>
<div class="nb">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-right navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Menu 0</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="alert alert-warning">We are but visitors on this rock, hurling through time and space at sixty-six thousand miles an hour.</div>
</div>
</body>マイケル、私はちょうどクリックしたときに（元のブートストラップの例と違って） "展開"ボタンが消えないことに気づいた。さらに、＃bs-example-navbar-collapse-1 divは、既存のヘッダーの下に表示する必要があります。手伝ってくれますか？ – Pepe
@ペペあなたのペンの応答レイアウトは間違っているようです。メールアイコンは、展開ボタンの下に表示されます。そして、「クリックしたときに拡大ボタンが消えない」という意味がわかりません - あなたのペンで消えませんか？それを刺して、私の答えを更新しました。それでも問題が解決しない場合は、新しい質問を投稿する必要があります。この質問はメニューの左側にメッセージアイコンを表示することでした。 –
あなたは正しいです。私の悪い。ところで申し訳ありませんが、私はすぐに答えませんでした。 〜 – Pepe
？ https://codepen.io/mcoker/pen/NgVrom –
ありがとう、マイケル！ – Pepe
汗がない、あなたが望んでいたかどうかは分かりませんでした。私は答えとして提出します。 –