2016-04-25 34 views
-1

Imageブートストラップナビゲーションバーの崩壊は、ハンバーガーボタン

を切り替える際に左右に移動私はナビゲーションがより中央に見えるクラス.navbar-collapse.collapse.inpadding-leftを削除しました。しかし、私がハンバーガーボタンをトグルすると、navbar-collapseは変な動作をします。

小さいビューポートでブートストラップnavbar-collapseを試してみると、このバグはありません。私は手動でこれらのコードでIPADの肖像画で動作するようにnavbar-collapseを可能にするので、これができることを認識する:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

    .navbar-collapse.collapse { 
     display: none !important; 
     padding-left:0; 
    } 
    .navbar-collapse.collapse.in { 
     display: block !important; 
     padding-left:0; 
    } 
    .navbar-header .collapse, .navbar-toggle { 
     display:block !important; 
    } 
    .navbar-header { 
     float:none; 
    } 
    .navbar-nav>li { 
     float:none !important; 
    } 
} 

私がダウンしてここにコードの類似したスニペットを作成し、同様のバグを見ることができます。
http://codepen.io/ngp130895/pen/ZWMQqo
私はどのようにこれを修正しますか?

+0

使用例? –

答えて

0

トグルするとパディングが0になるので、メニューが表示されたときにpadding: 15pxを追加すると、そのジャックが作成されません。私は答えを自分で見つけhttp://codepen.io/kalpeshsingh/pen/jqvWRa

enter image description here

+0

こんにちは、あなたの答えに感謝します。しかし、私はパディング0をしたい。 –

+0

なぜパディングゼロをしたいですか?どんな場合? –

+0

私はナビゲーションアイテムを中央に配置しています。左に15pxの詰め物が残っていると、彼らは中心にないようになります –

0

- ここ

は、バージョンフォークれます。私はクラスnavbar-collapseから余ったパディングを削除します。

.navbar-collapse { 
    padding-left:0; 
} 

ブートストラップはちょっと奇妙です。

関連する問題