bootstrap v4 navbar下拉位置

這是full navbar。當nabber爲collapsed時，問題出現在xs設備上。我認爲它可能有一些額外的餘地，但即使添加bootstrap v4 navbar下拉位置

.nav-item:nth-child(2) { 
margin: 0; 
padding: 0; 
}

我的CSS它沒有做任何事情。下面是HTML：

<nav class="navbar navbar-dark bg-custom"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
    <img class="logo col-xs-2 col-md-2" alt="Legal Active" src="../../assets/navbar-brand.png"/> 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3"> 
    <a class="navbar-brand" href="#"> Legal Active </a> 
    <ul class="nav navbar-nav pull-sm-right"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item btn-group"> 
     <div class="dropdown"> 
      <button class="btn dropdown-toggle nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Dropdown button 
      </button> 
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
       <a class="dropdown-item" href="#">Action</a> 
       <a class="dropdown-item" href="#">Another action</a> 
       <a class="dropdown-item" href="#">Something else here</a> 
      </div> 
     </div> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#"> No Win No Fee </a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#"> Contact </a> 
     </li> 
    </ul> 
    </div> 
</nav>

來源

2016-09-26 Sukhy

小屏幕的畫面下的 '崩潰' 鏈接。對困惑感到抱歉。 – Sukhy

也許是這樣：

.navbar-dark .navbar-brand, 
 
.navbar-nav .nav-item { 
 
    float: none; 
 
    margin: 0; 
 
} 
 

 
.navbar-nav .nav-item + .nav-item { 
 
    margin-left: 0rem; 
 
} 
 

 
@media (min-width: 34em) { 
 
    .navbar-dark .navbar-brand, 
 
    .navbar-nav .nav-item { 
 
    float: left; 
 
    } 
 
    
 
    .navbar-nav .nav-item + .nav-item { 
 
     margin-left: 1rem; 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" /> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-dark bg-custom bg-inverse"> 
 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <img class="logo col-xs-2 col-md-2" alt="Legal Active" src="../../assets/navbar-brand.png"/> 
 
    </button> 
 
    
 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3"> 
 
    <a class="navbar-brand" href="#"> Legal Active </a> 
 
    <ul class="nav navbar-nav pull-sm-right"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item btn-group"> 
 
     <div class="dropdown"> 
 
      <button class="btn dropdown-toggle nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       Dropdown button 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
       <a class="dropdown-item" href="#">Action</a> 
 
       <a class="dropdown-item" href="#">Another action</a> 
 
       <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#"> No Win No Fee </a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#"> Contact </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
</body> 
 
</html>

來源

2016-09-26 18:36:55 Elena

謝謝，但這看起來不正確 – Sukhy

bootstrap v4 navbar下拉位置

回答

相關問題