Reasonable navbar and inline-block display with Bootstrap

I created a justified navbar in Bootstrap 3. My problem is that when I add a display: inline-box to vertically align my elements, the hot and click area does not fill the width and height between the borders anymore (please bear with me, my english rusty).


<div class="container">
    <nav role="navigation" class="navbar-justified">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Menu produits</span>
            <i class="fa fa-bars fa-2x"></i>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav nav-justified">
            <li><a href="#">Aliquam bibendum</a></li>
            <li><a href="#">Aliquam</a></li>
            <li><a href="#">Praesent eros ipsum</a></li>
            <li><a href="#">Quisque</a></li>
            <li><a href="#">Suspendisse id dapibus</a></li>
            <li><a href="#">Nullam consectetur dictum</a></li>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Aliquam bibendum</a></li>



.nav-justified {
text-align: center;

.nav-justified > li > a {
color: #2f2f2f;
font-size: 12px;

@media (min-width: 768px) {
.nav-justified > li {
    border-right: 1px solid #d5d5d5;

.nav-justified > li:last-child {
border-right: 0;


Here's a link to Bootply to see the code in action:


source to share

2 answers

Add width: 100%;

to .nav-justified > li > a

. Then it should cover the entire length between the borders.



Since li

display: table-cell

, its height increases due to the two-line a

. However, the small ones a

do not have the same height, so I think you could add a :hover

hack to the li to achieve the same effect.

li:hover {
    background: #EEE;


Until you find a better solution.



All Articles