奇妙な（多分私はこれを理解していない）問題に遭遇しました。上部（navbar-inverse navbar-fixed-top）にナビゲーションバーを配置し、次のように右揃えのリンクを配置しようとしています。
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">designs</a></li>
<li><a href="#">designers</a></li>
<li><a href="#">buy</a></li>
<li><a href="#">about</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/login">login</a></li>
<li><a href="/register">sign up</a></li>
</ul>
</div>
[ http://www.bootply.com/dywf7Buv1u ]
これはすべてうまく機能しますが、私が言うと、右揃えの要素の1つをリンク内にラップされたボタンに変更すると、うまくいきません。
の代わりに：
<li><a href="/register">sign up</a></li>
私が入れた：
<li><a href="/register"><button type="button" class="btn btn-primary btn-small btn-nav">Sign up</button></a></li>
[ http://www.bootply.com/DjNB53gJao# ]
ボタンが他のすべてよりも低い垂直オフセットが表示されます。これにより、ナビゲーションバーの垂直方向の高さ全体も引き伸ばされます。
<button>内部のみを配置し、その周りを<li>ラップ<a>しない場合、この問題は発生しないことに注意してください。あなたがラップするときに起こって奇妙な何かがあります<a>Aの周りには、<button>
何か案は？ありがとう！
少し変ですが.btn-nav、ボタンを表示するリスト項目にクラスを追加する必要があります。
次に、ボタンをブロック要素でラップし、その後でのみボタンにを追加.navbar-btnします。
こちらのデモをご覧ください。
それが役に立てば幸い。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加