부트 스트랩 4 베타 Navbar를 마이그레이션

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 베타를 부트 스트랩 이전 웹 사이트를 마이그레이션 그리고 난 어떻게 든 그 과정에서 네비게이션 바에을 파괴했습니다. 나는 그것이 "토글 (toggle)"과 "확장 (expand)"의 변화와 관련이 있다고 확신하지만, 성공하지 못하고 몇 시간 동안 놀았습니다.

탐색 표시 줄은 페이지 상단에 평균 탐색 막대로 표시되어야합니다. 대신 왼쪽 상단 모서리에 메뉴를 확장하는 작은 상자가 있습니다.

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/