Bootstrap Navbar - 菜单项边框问题

Question

我正在研究Bootstrap,我得到了如下图像的要求......

在线演示

需求

我能够得到一切,除了边界高度.边框高度不应该从顶部到底部结束.但棘手的部分是,总高度应该是可点击的...... :(

我得到了什么

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实现此目的

.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;
}

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