Implementation Method of Bootstrap disabling responsive layout, bootstrap Layout

Source: Internet
Author: User

Implementation Method of Bootstrap disabling responsive layout, bootstrap Layout

One of the most important technologies in Bootstrap is the responsive layout. The powerful capabilities of a single code for different device terminals make responsive technology increasingly popular.
However, the so-called "radish vegetables have their own love ", if you want to use Bootstrap to develop your own projects, but you happen to dislike responsive layout (or the page layout you designed does not allow you to use responsive technology ), you can disable responsive layout in the following ways.

Remove tag

To disable the first step, remove

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

This tag does not scale your website when it is accessed on mobile devices, but is displayed on mobile devices at a rate of 100%.

Set width

Disable Step 2 and set a width for the. iner class to overwrite the function that is automatically adjusted based on the device width.
For example, you can set. container {width: 980px1_volume. to overwrite the original bootstrapformat, you 'd better introduce your own CSS file after the bootstrap.css file.

Delete menu collapse

If you use the navigation bar, you need to delete the folding sample of the menu on the mobile terminal (mainly through the navbar-toggle of the button ).

Grid layout

In addition, if you use a grid layout, you must use it. col-xs-* (the smallest device raster class) style to replace. col-md-* And. col-lg-* To ensure that the grid can be expanded across all devices.

Bootstrap will automatically help you adjust your page size for different screen sizes so that it performs well on screens of various sizes. The following describes how to disable this feature, just like this non-responsive layout instance page.

The above section describes how to disable responsive layout in Bootstrap. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.