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

标签 javascript jquery html css twitter-bootstrap

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

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

enter image description here

这是我使用的代码:

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

最佳答案

您需要添加以下 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>

关于javascript - 如何在折叠导航栏中的 li 之间添加空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35896474/

相关文章:

html - 如何覆盖 CSS 类中的优先级?

javascript - 当用户未选择下拉菜单中的选项时,如何提醒用户

html - 我的代码 HTML 和 CSS 是否正确,如何为导航栏中的文本添加悬停效果?

javascript - 如何从 javascript 下载外部 javascript 库依赖项?

javascript - 检查 javascript 数组中的最后一项

javascript - PHP 和 AJAX : How to append json_encode data to multiple unique IDs <DIV>'s?

javascript - 如果方法在 jQuery 的数组中可用,则执行函数

jquery - 根据字段值交替表行

javascript - 在 reactjs 中首次运行时在控制台上获取空对象

javascript - 在javascript中生成带有随机数的数组