Rachel S Rachel S - 5 months ago 10
CSS Question

Justifying Bootstrap navbar-nav list items with even space

I have a navbar menu with a few list items. I need even white space between them, and this is difficult for me since some list items are longer than others.
enter image description here

I've looked at this question but it doesn't address my problem, though I did use it for centering and justifying the navbar.

Here is a bootply: http://www.bootply.com/UjY99PYpe7

Answer

Try this css in your bootply:

.navbar-nav {
    text-align: justify;
    min-width: 100%;
}
.navbar-nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.navbar-nav li {
    display: inline-block;
    float:none;
}