bootstrap v4导航栏下拉位置

Question

这是完整的导航栏。 收起机收起时，问题出在xs设备上。 我以为可能会有一些额外的利润，但即使添加

.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>

Answer 1

可能是这样：

 .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>

bootstrap v4导航栏下拉位置

问题描述

1 个解决方案

解决方案1
0 2016-09-26 18:36:55

bootstrap v4导航栏下拉位置

问题描述

1 个解决方案

解决方案1 0 2016-09-26 18:36:55

解决方案1
0 2016-09-26 18:36:55