How to cancel bootstrap adaptation

How to cancel bootstrap adaptation: 1. Remove the header ""; 2. Set. Container width is enough.

The operating environment of this tutorial: windows10 system, bootstrap3.0. This article is applicable to all brands of computers.

Recommended: "bootstrap video tutorial"

Disable bootstrap responsive solution

Received a task a few days ago , I used the bootstrap framework to write several static pages. Since I focused on backend development for a long time, it took me 3 days to finally finish the page. During the process, I made some back-and-forth modifications and talked about the problems I encountered.

After using bootstrap to create the page, the team leader changed his mind again and said that bootstrap should not be used or the responsiveness of bootstrap should be disabled. There was no other way but to disable the responsiveness and it would take time. The shortest one, go to the bootstrap official website. If you want to disable responsiveness, first: remove the header . Second: Set the .container width, such as:

container{
width: 1170px;
max-width: none !important;
}

Third: Use the .col-xs- (minimum device grid class) style to replace .col-md- and .col-lg-*.

However, the problem does not end at this time.

Now give the container a fixed width. The width of the navigation bar with a white background can cover the entire browser. However, as the screen becomes smaller, the white background of the navigation bar cannot cover the width of the browser after it becomes smaller! Also, my carousel image is also required to fill the width of the browser, and now it is displayed in the middle. I thought to myself, if I had known it, I would not need bootstrap. Do I have to rewrite the page now? I checked online but couldn't find a solution. Later, I had an idea. I could give the body a width, or set the same width for the navigation bar and carousel. The question at this time is, what width should I set? ? Found out, you can’t do this!

Finally, when I was debugging the code with Firefox, I accidentally discovered this good thing, @media. However, I set it up myself, and it didn’t respond on the browser. I was speechless. In the end, it took a while. I found that this style was not written correctly.

So, the fourth point to solve the responsiveness problem of navigation bar and carousel is:

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

What he means is that when the screen is less than 1400px, set the body width to 1400px .Readers who don’t know can learn it online. This is a good thing!

Finally, top refers to top when position is absolutely positioned. Setting the width and height of span has no effect. It is not a block-level element, div is a block-level element, and span is an inline element. If you want to use span to implement the button in the picture below, you only need to set padding as needed. (padding: 20px 20px, etc.)

Since I am not a front-end person, I am not very familiar with these styles. If you don’t like them, don’t spray them.

The above is the detailed content of How to cancel bootstrap adaptation. For more information, please follow other related articles on the PHP Chinese website!