Bootstrap导航栏-菜单项边框问题

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

- Reddy

Answer 1

您可以使用伪元素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>

- Akshay

---

@Akshay...太棒了..这正是我想要的...感谢你挽救了我的一天。 - Reddy

np @Reddy 很高兴我能帮到你 - Akshay

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

- Apurva Prajapati

Answer 3

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

你可以在fiddle上查看：http://jsfiddle.net/Khumesh/7t5wxmnj/

- Ram Khumana

---

抱歉 @Khumesh，可点击区域丢失了。 - Reddy