बूटस्ट्रैप नेवबार - मेनू आइटम सीमा मुद्दे

Question

मैं बूटस्ट्रैप पर काम कर रहा हूँ और मैं छवि के नीचे की तरह आवश्यकता मिल गया ...

Online Demo

आवश्यकता

मैं ge में सक्षम हूँ सीमा ऊंचाई को छोड़कर, सब कुछ नहीं। सीमा ऊंचाई ऊपर से नीचे और अंत में अंत नहीं आनी चाहिए। लेकिन मुश्किल हिस्सा है, कुल ऊंचाई क्लिक करने योग्य होना चाहिए ... :(

क्या मैं

एचटीएमएल हो रही है

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

सीएसएस

.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

आप इस

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

Answer 2

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

प्राप्त करने के लिए psuedo-elementafter और before उपयोग कर सकते हैं आप बेला पर जांच कर सकते हैं: http://jsfiddle.net/Khumesh/7t5wxmnj/

Answer 3

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