如何在 Bootstrap 3 中删除这个水平滚动条

Question

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

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;
    }
}

Answer 1

根据Bootstrap 3 documentation：

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

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

Updated Example

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

至于解释，.row class 每边有 -15px 个边距。

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

.container class 有效地取代了以下内容：

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

除了阅读 Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".

Answer 2

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

body {overflow-x: hidden;}

Answer 3

这个问题基本上是由于父.container 丢失引起的。解决方法是可以在行中添加.no-container class 并添加 margin: 0 来补偿行 class 的负边距。

参见下面的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 -->

Answer 4

写作：

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

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

Answer 5

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

Answer 6

将其复制并粘贴到 CSS 代码中

   html, body {
     overflow-x: hidden;
   }

Answer 7

试试这个！对我有用。

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

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

Answer 8

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

如何在 Bootstrap 3 中删除这个水平滚动条

How to remove this horizontal scrollbar in Bootstrap 3

html

css

twitter-bootstrap

twitter-bootstrap-3