twitter-bootstrap 使引导程序导航栏分隔符均匀间隔

Make bootstrap navbar divider evenly spaced

提问by user3803747

How do we make the vertical dividers in the navigation bar evenly spaced out?

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

Here's the HTML and CSS i'm currently using.

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

HTML:

HTML：

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

CSS:

CSS：

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

Navbar code:

导航栏代码：

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

采纳答案by matthewelsom

There are several ways to achieve the effect you are after. Here is a quick fix that will solve your issue and give you the result you need.

有几种方法可以达到您所追求的效果。这是一个快速修复，可以解决您的问题并为您提供所需的结果。

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

A better approach which would save you a little html writing would be to do something like the following:

一种可以为您节省一点 html 编写的更好方法是执行以下操作：

1. Remove your .divider-verticalclass from the HTML
2. Style your .lielements, use marginand paddingon the same side as your border- in this case the right
3. we will use Pseudo class :last-childto remove some css attributes from the last menu item

1. .divider-vertical从 HTML 中删除您的课程
2. 设计你的.li元素，使用margin和padding在你的同一侧border- 在这种情况下是正确的
3. 我们将使用伪类: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>

回答by Mark

Take a look at this. I added the divider-verticalclass to the Home<li>tag to give it styling.

看看这个。我将divider-vertical类添加到Home<li>标签中以赋予它样式。

JSFiddle

JSFiddle

HTML

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

CSS

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

回答by HelloWorld

You need to change your CSS to the following:

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

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

You had margin on the left and right set to 9px.

您将左右边距设置为 9px。

If you want the extra space use:

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

padding: 0 9px;

instead. hereis a working example, but you will need to stretch the panel with the result to see it since bootstrap is making your nav into a navicon at jsfiddle's default width.

反而。这是一个工作示例，但您需要用结果拉伸面板才能看到它，因为引导程序正在将您的导航变成 jsfiddle 的默认宽度的导航图标。