A quick solution to Bootstrap page reduction and deformation: bootstrap page Deformation

A quick solution to Bootstrap page reduction and deformation: bootstrap page Deformation

Bootstrap layout is a Web page layout method that is widely used. For example, we use a layout that is very popular with intermediate content: 3-6-3 layout. The Code is as follows:

<style type="text/css">body{width:1350px;}header{background-color:#d9534f;height:120px;}.center{background-color:#31b0d5;border:1px solid #ff0000;height:300px;margin:0px;}footer{background-color:#f0ad4e;height:100px;}</style>
After running, the page is normal and the effect is as follows:

However, when we narrow down the page window, we find that the three divs in the middle of the page are squashed out, and one div occupies a single row. The effect is as follows:

Not only is the div in the middle crowded and the webpage length automatically lengthened, this is not what we need. At this moment, you can set the class attribute of each partition to col-lg col-md col-sm col-xs at the same time to adapt to the screen of each size. The changed code is as follows:
Run again. After the page is reduced, the page will not be arranged in disorder. However, when the page window is reduced, the page becomes flat, and the effect is as follows:

This is caused by the absence of width for each block area element. If you set the width for the body again, [width: 1350px (screen width)] can avoid this situation and automatically generate a scroll bar, and display the page as follows:

The above is a quick solution to narrow down the deformation of the Bootstrap page introduced by xiaobian. 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!