问题
I use bootstrap responsive and either I am doing something wrong, or bootstrap is not so responsive as I would love it to be.
Below you see 4 possible states, and I would avoid the two in middle. Either everything is inline like in first case, or force bootstrap to be "mobile" like in case 4.
QUESTION Can I set minimum width in pixels on which Bootstrap will always be in this mobile look like shown in case 4?
I am using twitter bootstrap version 3 here is code responsible for navbar https://gist.github.com/andilab/c1eba569dd0b9b9ad280
case 1: OK
case 2: BAD
case 3: BAD
case 4: OK
回答1:
Yep. Lots of ways to do it, but I think the easiest is to download a custom Bootstrap from http://getbootstrap.com/customize. Specifically see this note:
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-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
And make that change here: http://getbootstrap.com/customize/#grid-system. In your case, you would change @grid-float-breakpoint: @screen-sm-min to @screen-md-min.
回答2:
The bootstrap.css file contains @Media rules that define the min-width at which it swtiches to the mobile layout.
You shouldn't edit the bootstrap.css file directly but you could override the min-width in a custom CSS file.
回答3:
The full and working solution should be focused on the resolution on which the navbar menu should be collapsed to:
.
working demo http://www.bootply.com/98488 by @Skelly
The answer can be found here: Twitter Bootstrap 3 navbar-collapse - set width to collapse
回答4:
This may help.
http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
You can use responsive utilities classes.
For example in your header container you can add hidden-xs hidden-md hidden-sm and on most mobile phones and tablets your menu will be like in your case 4.
Hope this is what you were looking for.
来源：https://stackoverflow.com/questions/24851785/can-i-explicit-define-minimum-pixel-width-on-which-bootstrap-should-switch-to-re