如何在 Bootstrap 3 中删除此水平滚动条答案

【问题标题】：How to remove this horizontal scrollbar in Bootstrap 3如何在 Bootstrap 3 中删除此水平滚动条
【发布时间】：2015-03-01 17:55:39
【问题描述】：

我的引导页面上有这个令人讨厌的水平滚动。无法弄清楚是什么让它表现得像这样或该怎么做？

JsFiddle 链接：http://jsfiddle.net/FatAlbert/cd1syrd9/2/

HTML：

<body>
    <div class="wrapper">
        <div class="row">
            <div class="header">
                <div class="container">
                    <!-- navigation-->
                        <nav class="navbar navbar-default">
                            <div class="container-fluid">

                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
                                <a class="navbar-brand" href="#"><img src="xxx" /></a>

                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav">
                                        <li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li>
                                        <li><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                </div>
                            </div>
                        </nav><!-- / navigation-->
                </div>
            </div><!-- / header-->
        </div><!-- / container-->
        <div class="row">
            <div class="first-page-content">
                <div class="container">
                        <img class="img-responsive img-big" src="xx"  />
                        <p>
                            Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam. 
                        </p>

                </div>
            </div>
        </div><!--/first-content-->
    </div>
    <div class="footer">
        <div class="container">
            <p class="pull-right">
                Some<br />
                Info<br />
            </p>
        </div>

    </div><!-- /footer-->

</body>

CSS：

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 160px;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.5em;
}

p {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.05em;
    line-height: 1.8;
    text-align: justify;
}

a {
    color: #0071BB;
    font-weight: bold;
}

.wrapper {
}

.footer {
    position: absolute;
    padding-top: 25px;
    bottom: 0;
    width: 100%;
      /* Set the fixed height of the footer here */
    height: 160px;
    background-color: #5FC8FF;
}

.header .glyphicon-wrench {
    margin: 0 3px;
}

.header h4 {
    margin-right: 3px;
}

.img-responsive {
    display: block;
    margin: auto;
}

.img-responsive.img-big {
    margin-top: 75px;
}

.navbar {
    border: none;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-default .navbar-nav > li {
    width: 150px;
    margin-right: 2px;
}

.navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li > a:hover {
    color: #fff;
    font-weight: bold;
    background-color: #92C7E1;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: #98CEE5;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #98CEE5;
}

a.navbar-brand {
    padding: 5px;
}

.row {
}

.alert {
}

.well {
}

.footer p {
    font-weight: bold;
    color: #FDFDFB;
}

@media (min-width: 992px) {
}

@media (min-width: 768px) {

    .first-page-content p {
        margin: 75px auto 25px auto;
        width: 524px;
    }
}

【问题讨论】：

查看我的评论，只需在您的 CSS 中添加此代码，它将完全禁用您的水平滚动条。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

设置溢出-x：隐藏；有效，但会影响滚动事件。在容器中放置行对我有用。

【讨论】：

【解决方案2】：

试试这个！它对我有用。

.col-12{
    padding-right: 0!important;
    padding-left: 0!important;
}

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

【讨论】：

【解决方案3】：

复制并粘贴到 CSS 代码中

   html, body {
     overflow-x: hidden;
   }

【讨论】：

【解决方案4】：

在我的例子中，我在另一个 container-fluid 类 div 标签中有一个 container-fluid class div 标签。删除其中一个解决了这个问题。

【讨论】：

【解决方案5】：

写作：

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

在您的 CSS 中，是一种解决此问题的方法

【讨论】：

【解决方案6】：

这个问题基本上是由于缺少父 .container 引起的。解决方案是可以在行中添加一个 .no-container 类，并添加 margin: 0 来补偿行类的负边距。

请参阅下面的 CSS 和 HTML 标记代码：

.no-container {
    margin-left: 0 !important;
    margin-right: 0 !important; 
}
.row {
    border: 1px solid #999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--<div class="container"> Container is commented -->
<div class="row no-container">
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
</div>
<!--</div> Container ends here -->

【讨论】：

【解决方案7】：

只需将此代码复制到您的 CSS 中，它就会禁用您的水平滚动条。

body {overflow-x: hidden;}

【讨论】：

这只会隐藏浏览器滚动条。 .row 元素仍然会超出范围，并且大多数移动设备都会出现问题。

【解决方案8】：

根据Bootstrap 3 documentation：

为了正确对齐和填充，行必须放在 .container（固定宽度）或 .container-fluid（全宽）内。

因此，将 container 类添加到您的 .wrapper 元素中。

Updated Example

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

作为解释，.row 类在每一侧都有-15px 边距。

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

.container 类有效地将其替换为以下内容：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

除了阅读Bootstrap 3 docs，我建议阅读文章“The Subtle Magic Behind Why the Bootstrap 3 Grid Works”。

【讨论】：

谢谢！您还解决了我的粘页脚问题，但也没有用。
就我而言，我无法使用 .container，因为它在较小的设备上具有固定宽度。我用 .container-fluid 解决了这个问题。
非常感谢。由于默认情况下应用了水平滚动，因此发生了溢出。添加 class="container-fluid" 后，它完美对齐。