Bootstrap Navbar - 菜单项边框问题

Question

我正在研究Bootstrap，我的要求如下图所示......

  

Online Demo

要求

除边境高度外，我能得到所有东西。 边框高度不应该从顶部到底部结束。但棘手的部分是，总高度应该是可点击的...... :(

我得到了什么

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </div>
</nav>

CSS

.navbar-default{background:#005986;}
.navbar{border:0;border-radius:0;}
ul.nav{border-right:1px solid #84B6D0;}
ul.nav li a{border-left:1px solid #84B6D0;color:#fff; }
.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color:#fff;}
.navbar-default .navbar-nav>li>a:hover{background:#022E44;}

Answer 1

您可以使用psuedo-element after和before来实现此目标

＆＃13;

＆＃13;

.navbar-default {
  background: #005986;
}
.navbar {
  border: 0;
  border-radius: 0;
}
ul.nav {
  list-style: none;
  border-right: 1px solid #84B6D0;
}
ul.nav li {
  padding: 20px 0;
  display: inline-block;
}
ul.nav li a {
  padding: 20px 10px;
  color: #fff;
  position: relative;
}
ul.nav li a:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  right: 0;
  background: #fff;
  top: 50%;
  transform: translate(0, -50%);
}
ul.nav li:first-child a:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 60%;
  left: 0;
  background: #fff;
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  background: #022E44;
}

＆＃13;

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.navbar-default {
    background: #005986;
}

.navbar {
    border: 0;
    border-radius: 0;
}

ul.nav li:last-child a {
    border-right: 1px solid #84B6D0;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

ul.nav li a {
    border-left: 1px solid #84B6D0;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus,
    .navbar-default .navbar-nav>li>a:hover {
    color: #fff;
}

.navbar-default .navbar-nav>li>a:hover {
    background: #022E44;
}

Answer 3

 ul.nav {
        border-right: 1px solid #84B6D0;
        margin: 9px 0px;
       }

你可以查看小提琴：http://jsfiddle.net/Khumesh/7t5wxmnj/