Tuesday, January 14, 2020

flex-wrap: nowrap;

This is one of the styles on the nav class in Bootstrap along with...

display: flex;

 
 

...you may make a set of "tabs" as suggested here and they will all fall in a horizontal line without wrapping no matter how narrow the horizontal screen real estate is. To allow the "tabs" to wrap make a class for yourself like so:

.wrap-beneath {
   flex-wrap: wrap !important;
   white-space: normal !important;
}

 
 

...and put that in the class tag of the html element wrapping your a tags following the nav class. I fought with this today and the DashForge style nav-wrapper was on an element wrapping the nav HTML tag and hidding anything that wrapped with an overflow: hidden; trick. I ended up just removing this style as part of my refactoring.

No comments:

Post a Comment