Can I determine the minimum pixel width at which bootstrap should switch to a flexible mobile version?

Question

I use bootstrap responsive, and either I'm doing something wrong, or bootstrap is not as responsive as I would like.

Below you see 4 possible states, and I would avoid two in the middle. Either everything is built-in, as in the first case, or forced bootstrap "mobile", as in case 4.

QUESTION Can I set the minimum width in pixels at which Bootstrap will always be in this mobile mode, as shown in case 4?

I am using twitter bootstrap version 3 here is the code responsible for the navigator https://gist.github.com/andilab/c1eba569dd0b9b9ad280

case 1: OK

case 2: BAD case 3: BAD Case 4: OK

Answer 1

Yeah. There are many ways to do this, but I think the easiest way is to download custom Bootstrap from http://getbootstrap.com/customize . In particular, pay attention to this note:

The nabbar collapses to a vertical mobile view when the viewport is narrower than @ grid-float-breakpoint, and the horizontal non-mobile view expands when the viewport is at least @ grid-float-breakpoint in width. Adjust this variable in the Less section of the source to control when the navigation bar collapses / expands. The default value is 768px (the smallest "small" or "tablet" screen).

And make this change here: http://getbootstrap.com/customize/#grid-system . In your case, you can change @grid-float-breakpoint: @screen-sm-min to @screen-md-min .

Answer 2

The bootstrap.css file contains @Media rules that define the min-width in which it gets to the mobile layout.

You do not have to edit the bootstrap.css file directly, but you can override the min-width in your custom CSS file.

Answer 3

A complete and working solution should be focused on the resolution on which the navigation menu should be minimized: .

working demo http://www.bootply.com/98488 @Skelly

The answer can be found here: Twitter Bootstrap 3 navbar-collapse - set width to collapse

Answer 4

This can help.

http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

You can use responsive utilities.

For example, in your header container you can add hidden-hidden-hidden-md-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.