Question

这是full navbar。当nabber为collapsed时，问题出在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

也许如此：

＆＃13;

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

＆＃13;

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

＆＃13;

bootstrap v4 navbar下拉位置

1 个答案: