Implementation of Bootstrap Disable Responsive Layout

One of the most important technical contents in Bootstrap is responsive layout. The powerful ability of primary coding for different equipment terminals makes responsive technology more and more popular.
However, as the saying goes, "each has its own love", if you want to use Bootstrap to develop your own project but happen to not like responsive layout very much (or the page layout you designed does not allow you to use responsive technology), then you can disable responsive layout in the following ways.

Remove Label

To disable step 1, you need to remove the

<meta name="viewport" content="width=device-width, initial-scale=1.0 " >

The purpose of this tag is to make your website will not be scaled when it is accessed on the mobile device, but will be displayed in 100% proportion on the mobile device.

Set width

Disable step 2 and set 1 width for the. container class, overriding its ability to adjust automatically according to device width.
For example, you can configure. container {width: 980px;} In order to override the original bootstrap style, it is best to introduce your custom css file after bootstrap. css file.

Remove menu folding

If you use the navigation bar, you should pay attention to deleting the folding expansion of the menu on the mobile side (mainly realized through navbar-toggle of button).

Grid layout

In addition, if you have a grid layout, you should adopt the style of. col-xs-* (the smallest device grid class) instead of. col-md-* and. col-lg-*, which ensures that the grid can be expanded across all devices.

Bootstrap will automatically help you adjust your page for different screen sizes to make it perform well on each screen size. Below we list how to disable this 1 feature, just like this non-responsive layout instance page 1.