Question

请帮助解决问题。

有一个页面fiddle。如果将其压缩到宽度（宽度<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;
}

请帮助删除下方滚动。

Answer 1

你可以使用

body {
    overflow-x: hidden;
}

但实际问题是由bootstrap.css:1606引起的。您也可以在css中覆盖（仅适用于宽度<480px）

.row {
   margin-right: -15px;
   margin-left: -15px;
}

Answer 2

编辑：你曾经使用过许多.container类，当你只使用一两个时，它就可以解决你的问题。

<div class="container">
  <div class="row">...</div>
  <div class="row">...</div>
</div>

您还可以看到此答案：horizontal scrollbar appearing, row having negative margin

这是一个小提琴：http://jsfiddle.net/52VtD/11250/

希望有所帮助：）

Answer 3

将padding:0添加到容器时要小心。您将打破Bootstrap逻辑并创建不必要的边距。

如果您只是想隐藏顶部＆amp;底垫。

body > .appointment_mobile > .container.menu_area {
    padding-top:0;
    padding-bottom:0;
}
.footer > .container.footer_area {
    padding-top:0;
    padding-bottom:0;
}

TL; DR 你不应该做任何左右＆amp; container类中的右边填充修改。

Answer 4

.container > .row {
    margin-left: 0;
    margin-right: 0;
}

<强> http://jsfiddle.net/52VtD/11248/

如何删除底部滚动？

4 个答案: