问题
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing? Appreciate it. Thank you. NJ
回答1:
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the @grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
回答2:
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
- Reduce the amount or width of navbar items.
- Hide certain navbar items at certain screen sizes using responsive utility classes.
- Change the point at which your navbar switches between collapsed and horizontal mode. Customize the
@grid-float-breakpointvariable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than
@grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least@grid-float-breakpointin width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is768px(the smallest "small" or "tablet" screen).
来源：https://stackoverflow.com/questions/27986301/bootstrap-3-navbar-jumping-onto-two-lines-rather-than-collapsing