Remember a bootstrap custom container lead to pit horizontal scroll bar appears page X axis

 One ❀ lead

 When bootstrap custom, because the UI to the main page of the section width of the drawing is 1200px, so I changed the width of the container vessel from the default 1200px 1170px, then found the page during debugging page-down scroll bar appears in the horizontal axis this difference in the I, in addition to container page is 1200px outside, are 100% the width of the head of the tail, but also a place beyond which, combined with simple debugging bootstrap properties see a problem here to be a record.

 II ❀ problem

During the commissioning process, read the width of the lower container vessel, is 1200px right.

However, when viewing head, found an interesting question, the width of the head is 100%, then the width of debugging indeed shows 1200px, but the content width of the head to show I was only 1184px, how less out of thin air more than a dozen pixels.

The results only think of it, because the page content more, Y-axis scroll bar, so the screen is a scroll bar 1200px took part, actually not so much.

The bootstrap using media queries, the original critical point is the screen width over 1200px, container width is 1170px, deliberately left 30px as a buffer.

I just modify the width of the container at the time of customization, resulting in reduced page is coming 1200px, container vessel has been fixed 1200px, page scroll bar because the actual reason enough 1200px, which led to the emergence of the X-axis scroll bar.

In doing so, he said bootstrap media queries, do not let the media width controller queries the same width or have a certain critical point the cause of ...

 So how to solve it? The first media queries can modify the width of the critical point, the need customized solutions, can also be followed by overflow treatment under direct enough.

 Triple ❀ solve

Add this code on it:
html {
overflow-y: scroll;
}

body {
width: 100%;
overflow: hidden;
}

最近在使用bootstrap做项目,也是踩了不少坑,有问题再记录,就先写到这里了。

Guess you like

Origin www.cnblogs.com/echolun/p/11278424.html
Recommended