navbar navbarを横に折りたたんでナビアイテムを表示

Question

ボタン付きのnavbarがあり、ボタンをクリックするとアイテムが下に表示されますが、それは虚偽の意味で表示されますが、水平に崩壊する必要があります。私はここでいくつかの質問を見ましたが、私が必要とするものを達成することはまだできません。

here is the sketch of what i need

<nav class="navbar navbar-light" style="background-color: #2C3E50 ;"> 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> 
    <h1 class="navbar-brand mb-0 move-header ">NavBrand</h1> 
    <div class="collapse width" id="navbarNav"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> 
      <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> 
      <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> 
      <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> 
     </ul> 
    </div> 
</nav> 

// CSS

 .navbar { 
    margin-top: 40px; 
    display: inline-block; 
} 
    .navbar { 
    border-bottom-right-radius: 200px; 
    border-top-right-radius: 200px; 
} 

Answer 1

あなたはこのテクニック使用してこの操作を行うことができます。

.navbar-nav { white-space: nowrap; } 
.nav-item { display: inline-block; } 

やフレキシボックスを使用して：

.navbar-nav { display: flex; flex-flow: row nowrap; } 

を

最初の解決策は、行の中断を防ぎ、メニュー項目を指定してインライン動作を行うことです。 2番目のソリューションは、フレックスボックスレイアウトの使用に基づいています。

---

UPDATED

あなたには、いくつかのより多くの変更を必要とするブートストラップ4を使用して、これを追加します。

.navbar-nav { 
    flex-flow: row nowrap; 
} 

.navbar { 
    flex-flow: row nowrap; 
    display: inline-flex; 
}