使Bootstrap导航栏分隔符均匀间距

Question

我们如何使导航栏中的垂直分隔线间距均匀？

这是我目前正在使用的 HTML 和 CSS。

HTML：

<li class="divider-vertical"><a href = "#">Contact Us</a></li>

CSS：

.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

导航栏代码：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <button type="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>

      <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href = "#">Home</a></li>
            <li class="divider-vertical"><a href = "#">About</a></li>
            <li class="divider-vertical"><a href = "#">Jobs</a></li>
            <li class="divider-vertical"><a href = "#">Contact Us</a></li>
            <li class="divider-vertical"><a href = "#">Resources</a></li>
          </ul>
      </div>
    </nav>

- user3803747

---

你是什么意思？你具体要找什么？如果你设置每个分隔符的高度，那么它们将根据你设置的高度均匀间隔。 - Mark

嗨，我想要输出结果像这样：----> Home | About | Contact <---- 但是当前的输出结果是这样的：---> Home | 两个制表符空格 About 两个制表符空格 | Contact <--- - user3803747

你能发布你整个导航栏的代码吗？ - Mark

Answer 1

有几种方法可以实现您想要的效果。这里是一个快速解决方案，将解决您的问题并给您所需的结果。

 .divider-vertical {
height: 50px;
margin: 0 0 0 9px;
padding: 0 0 0 9px;
border-left: 1px solid red;
}

一个更好的方法，可以节省一些html编写工作，就是像下面这样做：

1. 从HTML中删除你的
   类
2. 设置你的
元素的样式，在与你的边框相同的一侧使用margin和padding - 在这种情况下是右侧
4. 我们将使用伪类:last-child从最后一个菜单项中删除一些css属性

li {
  border-right: 1px solid red;
  margin: 0 9px 0 0;
  padding: 0 9px 0 0;
}

li:last-child {
  border-right: none;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <button type="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>

      <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href = "#">Home</a></li>
            <li><a href = "#">About</a></li>
            <li><a href = "#">Jobs</a></li>
            <li><a href = "#">Resources</a></li>
          </ul>
      </div>
    </nav>

- matthewelsom

Answer 2

看一下这个。我给Home的<li>标签添加了divider-vertical类，以使其具有样式。

JSFiddle

HTML

（注意：已对原文进行必要的修正以免产生歧义）

  <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li class="divider-vertical"><a href = "#">Home</a></li>
        <li class="divider-vertical"><a href = "#">About</a></li>
        <li class="divider-vertical"><a href = "#">Jobs</a></li>
        <li class="divider-vertical"><a href = "#">Resources</a></li>
      </ul>
  </div>
</nav>

CSS

.divider-vertical {
    height: 50px;
    width:100px;
    margin: auto;
    border-left: 1px solid black;
    border-right: 1px solid red;
    text-align:center;
}

- Mark

Answer 3

你需要将你的CSS更改为以下内容：

.divider-vertical {
    height: 50px;
    border-left: 1px solid #F2F2F2;
    border-right: 1px solid #FFF;
}

你的左右边距设置为9像素。

如果你想要额外的空间，请使用：

padding: 0 9px;

相反，这里 是一个可行的示例，但您需要拉伸面板以查看结果，因为bootstrap将您的导航栏转换为navicon（在jsfiddle的默认宽度下）。

- HelloWorld