부트 스트랩 4를 사용하여 탐색이 올바르게 표시되게하려면 어떻게해야합니까?

Question

site에 대한 일부 업데이트를하고 있고 부트 스트랩 4 베타를 구현 중이며 올바르게 표시되는 탐색에 문제가 있습니다. 나는 몇 가지 측면을 기교있게 할 수 있었지만 수직적 인 전시물에 갇혀있다. 내가했던

.navbar { 
    float: left; 
} 

#navbar { 
    display: block; 
} 

ul.nav.navbar-nav > li.active { 
    float: left; 
} 

: 여기

<nav class="navbar navbar-default"> 
     <div class="container"> 
     <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> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

가 지금처럼 내가 보여 탐색을 얻기 위해 신청 한 추가 CSS입니다 : 여기

는 HTML입니다 기본 레이아웃을 격리하고 탐색을 올바르게 표시하지만 여기서 실패하는 원인을 확인할 수 없습니다. 모든 통찰력은 인정 될 것이다. 부트 스트랩 용 V3

Answer 1

:

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <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> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav>

부트 스트랩 V4를 들어

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> 
 
    <!-- Brand --> 
 
    <a class="navbar-brand" href="#">Project Name</a> 
 
\t <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="collapsibleNavbar"> 
 
    <!-- Links --> 
 
    <ul class="navbar-nav"> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Home</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">About</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Contact</a> 
 
    </li> 
 

 
    <!-- Dropdown --> 
 
    <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> 
 
     Dropdown link 
 
     </a> 
 
     <div class="dropdown-menu"> 
 
     <a class="dropdown-item" href="#">Action</a> 
 
     <a class="dropdown-item" href="#">Another</a> 
 
     <a class="dropdown-item" href="#">Else</a> 
 
     <div class="dropdown-divider"></div> 
 
     <h6 class="dropdown-header">Nav header</h6> 
 
     <a class="dropdown-item" href="#">Link1</a> 
 
     <a class="dropdown-item" href="#">Link2</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</nav>