please help solve the problem.
请帮忙解决问题。
there is a page fiddle. If you compress it to the width(width < 420px), the bottom scrolling appears. and it should not be because it makes the bootstrap adaptive layout:
有一页小提琴。如果将其压缩到宽度(宽度<420px),则会显示底部滚动。它不应该是因为它使引导自适应布局:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 110px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
background-color: #fff;
}
body > .appointment_mobile > .container {
padding: 0px 15px 0;
}
please help remove the lower scrolling.
请帮助删除下部滚动。
4 个解决方案
#1
Be careful when adding padding:0
to your container. You'll break the Bootstrap logic and create that unnecessary margin.
添加填充时要小心:0到容器。您将打破Bootstrap逻辑并创建不必要的边距。
This code is better if you just want to hide the top & bottom paddings.
如果您只想隐藏顶部和底部填充,则此代码更好。
body > .appointment_mobile > .container.menu_area {
padding-top:0;
padding-bottom:0;
}
.footer > .container.footer_area {
padding-top:0;
padding-bottom:0;
}
TL;DR you shouldn't do any left & right padding modification in the container
class.
TL; DR你不应该在容器类中进行任何左右填充修改。
#2
you can use
您可以使用
body {
overflow-x: hidden;
}
but actual problem is being caused by bootstrap.css:1606
. which you can also override in your css
(only for width < 480px)
但实际问题是由bootstrap.css引起的:1606。你也可以在你的CSS中覆盖(仅适用于宽度<480px)
.row {
margin-right: -15px;
margin-left: -15px;
}
#3
EDIT : You used to many .container class, when you use only one or two, it solves your problem.
编辑:您曾经使用过很多.container类,当您只使用一两个时,它可以解决您的问题。
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
</div>
You can also see this answer: horizontal scrollbar appearing, row having negative margin
你也可以看到这个答案:水平滚动条出现,行有负边距
Here is a fiddle working: http://jsfiddle.net/52VtD/11250/
这是一个小提琴工作:http://jsfiddle.net/52VtD/11250/
Hope it helps :)
希望能帮助到你 :)
#1
Be careful when adding padding:0
to your container. You'll break the Bootstrap logic and create that unnecessary margin.
添加填充时要小心:0到容器。您将打破Bootstrap逻辑并创建不必要的边距。
This code is better if you just want to hide the top & bottom paddings.
如果您只想隐藏顶部和底部填充,则此代码更好。
body > .appointment_mobile > .container.menu_area {
padding-top:0;
padding-bottom:0;
}
.footer > .container.footer_area {
padding-top:0;
padding-bottom:0;
}
TL;DR you shouldn't do any left & right padding modification in the container
class.
TL; DR你不应该在容器类中进行任何左右填充修改。
#2
you can use
您可以使用
body {
overflow-x: hidden;
}
but actual problem is being caused by bootstrap.css:1606
. which you can also override in your css
(only for width < 480px)
但实际问题是由bootstrap.css引起的:1606。你也可以在你的CSS中覆盖(仅适用于宽度<480px)
.row {
margin-right: -15px;
margin-left: -15px;
}
#3
EDIT : You used to many .container class, when you use only one or two, it solves your problem.
编辑:您曾经使用过很多.container类,当您只使用一两个时,它可以解决您的问题。
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
</div>
You can also see this answer: horizontal scrollbar appearing, row having negative margin
你也可以看到这个答案:水平滚动条出现,行有负边距
Here is a fiddle working: http://jsfiddle.net/52VtD/11250/
这是一个小提琴工作:http://jsfiddle.net/52VtD/11250/
Hope it helps :)
希望能帮助到你 :)
#4
.container > .row {
margin-left: 0;
margin-right: 0;
}