Even Bootstrap Nav Tabs and Dropdown? - css

Question

I have the following JS Fiddle here as an example:
Original JS Fiddle:
https://jsfiddle.net/dnovdk47/3/
I am trying to get the nav to be justified with even tabs that fill out equal space of the whole navigation menu. My other problem is I need to have the dropdown width and tab width be the same so that the dropdown lines up with the tab when opened. I was able to achieve this by setting the width of the ul dropdown to 100% and using flex
JS Fiddle with Justified Nav:
https://jsfiddle.net/dnovdk47/5/
CSS
.nav {
display: flex;
width: 100%;
}
.nav li {
background-color: #e3e3e3;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
}
.navbar-inverse .navbar-nav li > a {
height: 45px;
justify-content: center;
align-items: center;
display: flex;
}
.navbar-inverse .navbar-nav li ul {
width: 100%;
}
However, on the Fundamentals tab the dropdown text is larger/too wide and it goes outside of the box.
What I would like is if the tabs could be equal to the width of the dropdown. If it's not doable then maybe just wrap the text to the second line for super long text/elements.
Here is a picture of what I am trying to achieve for all tabs and dropdowns to be even dynamically.

Answer 1

You can add the following css to your dropdown li to break the text into multiple lines.
.dropdown-menu>li>a{
word-wrap: break-word;
white-space: inherit;
text-align: center;
}
JSFiddle: https://jsfiddle.net/dnovdk47/10/