BOOTSTRAP 3：カスタムナビゲーションバートグル問題

Question

下の画像に見られるように、私は私のブートストラップ3ナビゲーションバー上の私のメニューオプションの間に赤い線があります。これは、次のコードを使用して達成される

：

：私が持っている

<style> 

    .navbar-nav li{ 
     position: relative 
    } 
    .navbar-nav li:after{ 
     content: ''; 
     position: absolute; 
     right: -2px; 
     width:2px; 
     height: 50%; 
     top: 25%; 
     background: red 
    } 
    .navbar-nav li:before{ 
     content: ''; 
     position: absolute; 
     left: 0px; 
     width:2px; 
     height: 50%; 
     top: 25%; 
     background: red 
    } 

</style> 

問題は、ブラウザのウィンドウサイズが768回のトグルボタンキックで、一度に選択の幅を下回ったときに下図のようにドロップダウンの一番下に醜いスクロールバーが表示されていることです私はさまざまなオプションを試してみました

、解決策は、ページのメディア幅に結びついているようだが、私はちょうどすることはできません。

私は右のそれを示し、すべては以下のとおり赤いバーがあるスクロールそれはすべて正常に動作します。理想的には、ブートストラップトグルが始動するときに赤いバーを表示しないことが理想的です。

これについての助けに感謝します。

Answer 1

メディアクエリ内で赤い線を定義する必要があります。ブートストラップを使用しているため、既にメディアクエリが定義されている可能性があります。

@media (min-width: 768px) { 
    .navbar-nav li:after{ 
    content: ''; 
    position: absolute; 
    right: -2px; 
    width:2px; 
    height: 50%; 
    top: 25%; 
    background: red 
    } 
    .navbar-nav li:before{ 
    content: ''; 
    position: absolute; 
    left: 0px; 
    width:2px; 
    height: 50%; 
    top: 25%; 
    background: red 
    } 
} 

Answer 2

あなたは、単にあなたに感謝し、

@media (max-width:768px) { 
    .navbar-nav { 
    overflow-x:hidden; 
    } 
}