Bootstrap Jumbotron

Question

我在我的网页上添加了一个超级按钮，我的页面现在显示了右下滚动条！不知道如何解决这个问题。

非常感谢任何提示或提示。

url http://tyrescanner.net/contact-us

 <div class="container-fluid">
                         <div class="row">
                            <div class="col-md-12">             
                                <div class="jumbotron">
                                    <h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
                                      <p></p>
                                    <h2>Contact us.</h2>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

您的jumbotron包含div row和col-md-12：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">             
      <div class="jumbotron">

删除它们并只留下jumbotron。

或从你的css中删除填充：

.container-fluid {
    width: 100%;
    padding-top: 0px;
    /* padding-left: 0px; */
    /* padding-right: 0px; */
    padding-bottom: 0px;
}

它会覆盖bootstrap css并导致页面宽度出现问题。

Answer 2

你要的是什么？我假设你只是不想要底部滚动条，是吗？

如果是这样，下面是您的HTML CSS。在bootstrap.css文件和行号1071

中更改如下所示

html {
 font-size: 10px;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 overflow: auto;
 overflow-x: hidden;
 }

Answer 3

查看您的网站后，我发现了一些问题：

1. 您使用容器流体和嵌套容器流体作为jumbotron父元素，嵌套的元素是多余的。
2. 然后我看到你已经覆盖了容器流体和.col - 12类默认引导程序左/右填充到0px，但你没有改变.row类的默认边距，因此左/右边距为0px你的底部滚动条。
3. 对于页脚，删除margin-top并使页脚成为body元素的直接子元素，然后将以下css添加到form，body和html元素：height:100%;，其余为您添加的边距对元素。