Question

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

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：

行必须放在.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”。

Answer 2

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

body {overflow-x: hidden;}

Answer 3

写作：

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

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

Answer 4

问题基本上是由于父.container缺失造成的。解决方案是您可以向行添加.no-container类并添加margin：0以补偿行类的负边距。

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

＆＃13;

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

＆＃13;

String myFormat = "EEE, MMM d, ''yy";
 SimpleDateFormat sdf = new SimpleDateFormat(myFormat, Locale.US);

＆＃13;

Answer 5

就我而言，我在另一个容器流体类div标签中有一个容器流体类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

你们每个人都要在行上面再添加一个课程 ...删除网页上的水平滚动。

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

8 个答案: