logo标签列表

如何在Bootstrap中移除水平滚动条

htmlcsstwitter-bootstraptwitter-bootstrap-3
61

我在我的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;
    }
}
请查看我的注释，在您的CSS中添加此代码，它将完全禁用水平滚动条。 - vasanth
8个回答
110

根据Bootstrap 3文档：

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

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

更新示例

<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文档之外，我建议阅读文章"The Subtle Magic Behind Why the Bootstrap 3 Grid Works"。

1
谢谢！你还解决了我黏性页脚的问题，它之前也不起作用。 - FatAlbert
2
在我的情况下，我不能使用 .container，因为它在较小的设备上具有固定宽度。我用 .container-fluid 来解决这个问题。 - Damjan Pavlica
1
非常感谢。由于默认应用了水平滚动条，导致溢出。添加 class="container-fluid" 后，它就正常对齐了。 - Impromptu_Coder
问题已解决。我已经将所有内容放在一个带有container-fluid类的div中，但似乎row的直接父元素（在我的情况下是一个表单）必须是应用了container-fluid类的元素。 - undefined
17

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

body {overflow-x: hidden;}
24
这将仅隐藏浏览器滚动条。.row元素仍将超出边界，您将在大多数移动设备上遇到问题。 - Roumelis George
14

写作：

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

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

2

将以下代码复制并粘贴到CSS中：

   html, body {
     overflow-x: hidden;
   }
1
问题基本上是由于缺少父级 .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 -->

1

设置 overflow-x: hidden; 可以起作用，但会影响滚动事件。将行放置在容器内对我而言行得通。

0
在我的情况下，我在另一个"container-fluid class div tag"中有一个"container-fluid class div tag"。移除其中一个修复了这个问题。
0

你可以试试这个！这个方法对我有用。

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

.row{
    margin-right: 0px;
    margin-left: 0px; 
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接