javascript - 如何在折叠导航栏中的 li 之间添加空间

Question

我试图在折叠导航栏中的 li 之间添加空格

但问题是，当我将导航器最小化时，导航栏无法正确折叠图像

这是我使用的代码:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar navbar-default navbar-static-top" style="padding-top:5px !important; padding-bottom:5px !important; margin-left:auto; margin-right:auto ;max-width:1135px">
  <div class="container">
    <a href="#" class="navbar-brand" style=""> <span style="font-weight:bold;">HELLO</span></a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#" ><span style="font-weight:bold; margin:40px">choice1</span></a></li>
        <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice2</span></a></li>
        <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice3</span></a></li>
        <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice4</span></a></li>
        <li>
          <a href="#" data-toggle="dropdown" onclick="document.getElementById('form-connect').style.display=(document.getElementById('form-connect').style.display=='none')?'block':'none';"> 
            <i class="fa fa-user hidden-xs" ></i> 
            <span style="font-weight:bold;">Connexion</span>
            <i class="fa fa-angle-down hidden-xs"></i> 
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您需要添加以下 CSS:

.navbar-default .navbar-nav>li>a {
  padding: 15px 0;
}

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="navbar navbar-default navbar-static-top" style="padding-top:5px !important; padding-bottom:5px !important; margin-left:auto; margin-right:auto ;max-width:1135px">
      <div class="container">
        <a href="#" class="navbar-brand" style=""> <span style="font-weight:bold;">HELLO</span></a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#" ><span style="font-weight:bold; margin:40px">choice1</span></a></li>
            <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice2</span></a></li>
            <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice3</span></a></li>
            <li><a href="#" ><span style="font-weight:bold; margin:40px ">choice4</span></a></li>
            <li>
              <a href="#" data-toggle="dropdown" onclick="document.getElementById('form-connect').style.display=(document.getElementById('form-connect').style.display=='none')?'block':'none';"> 
                <i class="fa fa-user hidden-xs" ></i> 
                <span style="font-weight:bold;">Connexion</span>
                <i class="fa fa-angle-down hidden-xs"></i> 
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>