The Bootstrap responsive navigation code changes from 768px to 992px and 768px992px

The Bootstrap responsive navigation code changes from 768px to 992px and 768px992px

If you don't talk much about it, paste the Code directly. The specific code is as follows:

<! -- Responsive navigation --> 
This is an example I followed. According to the first comment above, the button defines the class navbar-toggle. One of navbar-toggle's styles is media query.
//bootstrap.css @media (min-width: 992px) {  .navbar-toggle {   display: none;  } } 
Then I checked the navbar. less file. Found
// Navbar. less. navbar-toggle {position: relative; float: right; margin-right: @ navbar-padding-horizontal; padding: 9px 10px ;. navbar-vertical-align (34px); background-color: transparent; border: 1px solid transparent; border-radius: @ border-radius-base; // Bars. icon-bar {display: block; width: 22px; height: 2px; border-radius: 1px ;}. icon-bar +. icon-bar {margin-top: 4px;} @ media (min-width: @ grid-float-breakpoint) {// @ grid-float-breakpoint display: none ;}} // variables. less @ grid-float-breakpoint: @ screen-sm-min; // if you want to change it to 992px, use this @ grid-float-breakpoint: @ screen-md-min; // -------- @ screen-sm: 768px; @ screen-sm-min: @ screen-sm; @ screen-md: 992px; @ screen-md-min: @ screen-md; @ screen-desktop: @ screen-md-min; // Large screen/wide desktop // Note: deprecated @ screen-lg and @ screen-lg-desktop as of v3.0.1 @ screen-lg: pixel PX; @ screen-lg-min: @ screen-lg; @ screen-lg-desktop: @ screen-lg-min;
Therefore, if you want to modify the default fold breakpoint, convert the above Media query variable @ grid-float-breakpoint: @ screen-sm-min;
You can also customize a breakpoint variable to change it to another breakpoint defined by Bootstrap. Then re-compile it into a css file.
Note: It is best to copy variables. less as _ variables. lss. Copy navbar. less _ navbar. less. Then, modify the copied file. Finally, copy bootstrap. less to _ bootstrap and import it.
//__bootstrap.less //@import "navbar.less";  @import "_navbar.less"; //@import "variables.less"; @import "_variables.less"; 
After modification, compile the custom _ bootstrap. less file.
The above is the implementation code of Bootstrap responsive navigation changed from 768px to 992px. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!