html - navbar-brand offset を正しくスケーリングして、より短い navbar を取得しようとしています

Question

navbar-brand offset を正しくスケーリングして短い navbar を実装する方法がわかりません。

navbar の最大幅または margin-right にパーセント値を使用しようとすると、navbar-brand のオフセットが完全に妨げられます。

margin-right に固定値を使用してから、margin-left を .navbar > .container .navbar-brand から変更しようとすると、より良い結果が得られますが、.navbar-brand が短いジャンプをすることがあります。

ここに、2 つの異なる試行を含む bootply コードがあります。 http://bootply.com/86804 誰かが私を助けてくれることを願っています。

Answer 1

アップデート

768 en 991 ピクセル (小さなグリッド) の画面幅の間で、私はこれを見つけます:

上記はあなたがジャンプと呼ぶものですか？

可能な解決策：

1. グリッドのブレークポイントを 991px に設定します
2. margin-right:100px;991px の上に .navbar-elseのみを適用し ます

3. あなたの.nav-brandに休憩を追加してください：

   @media (最小幅: 768px) および (最大幅: 991px) {

   .navbar-brand > strong:after { content:"\a"; 空白: 前; }

   }

4. フォントを 992 ピクセル未満に小さくします

等

--end update http://getbootstrap.com/components/#navbarの例では、.navbar-header を .container にラップしていません。

設定してみてください：

.navbar
{
   width:50%;
}
.navbar-header
{
   padding-left:80px;
}

参照: http://bootply.com/86839