css - Chrome での不適切なレンダリングの修正

Question

Twitter ブートストラップを使用するアプリを作成しました。

ナビゲーション バーは、Firefox では正しく表示されますが、Chrome では正しく表示されません。

コードを貼り付けて役立つコードを検索しましたが、役立つものは何も見つからなかったので、残念ながらページへのリンクしかできません

何らかの理由で、スローガンがクロムの次の行に落ちています。clear: both と overflow: hidden を試しましたが、何も機能していないようです。

小さな画面を使用すると、スローガンが正しい位置に戻るので、メディア クエリと関係がある可能性があります。

どんな助けでも大歓迎です。

Answer 1

.navbar-header幅を指定するか、white-space: nowrapスタイルを設定する必要があります。今はラッピングです。

Answer 2

Bootstrap にはそのためのクラスがあり.navbar-textますが、スローガンをクラスに入れる必要があります.navbar-collapse。

<span class="navbar-text">Private voting platform</span>

余分なcssを追加する必要はありません。