ブートストラップ4ベータナビゲーションバーの移行は

Question

<div id="navarea"> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav custom_nav"> 
     <li class=""><a href="index.html">Home</a></li> 
     <li class="dropdown"> <a href="#" class="" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Store</a></li> 
     <li><a href="#">Media</a></li> 
     <li><a href="#">Partners</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

私は4ベータ版をブートストラップするために、古いWebサイトを移行していると私は何とかプロセスでナビゲーションバーを破壊してきました。私はそれが "トグル"と "拡大"の変化と関係があるとはかなり確信していますが、私は数時間それを成功させずに遊んできました。

ナビゲーションバーは、ページの上部に平均ナビゲーションバーとして表示されます。代わりに、私はメニューを展開する左上隅に小さなボックスを持っています。

Answer 1

ブートストラップ3のnavbarをコピーしてブートストラップ4に貼り付けることはできません。好みに合わせてメニューを再作成する必要があります。

これは、参照のためのブートストラップ4のサンプルメニューです。私は以下のURLに行くと例をチェックアウトをお勧めしたい

<nav class="navbar navbar-expand-lg navbar-default"> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

<div class="collapse navbar-collapse"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Store</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Media</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Partners</a> 
     </li> 
    </ul> 
</div> 

は、彼らが4

https://getbootstrap.com/docs/4.0/examples/