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

Question

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

Fat*_*ert 48 html css twitter-bootstrap twitter-bootstrap-3

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

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*ier 89

根据Bootstrap 3文档:

行必须放在.container(固定宽度)或.container-fluid(全宽)内,以便正确对齐和填充.

因此,将类添加container到.wrapper元素中.

更新的示例

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

Run Code Online (Sandbox Code Playgroud)

至于解释,.row班级的-15px每边都有边距.

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

Run Code Online (Sandbox Code Playgroud)

该.container课程有效地取代了以下内容:

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

Run Code Online (Sandbox Code Playgroud)

除了阅读Bootstrap 3文档之外,我还建议阅读文章" 为什么Bootstrap 3 Grid工作的背后的微妙魔法 ".

就我而言，我无法使用.container，因为它在较小的设备上具有固定的宽度。我用.container-fluid解决了这个问题。 (2认同)

Answer 2

vas*_*nth 13

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

body {overflow-x: hidden;}

Run Code Online (Sandbox Code Playgroud)

这只会隐藏浏览器滚动条..row元素仍将超出范围,您将遇到大多数移动设备的问题. (20认同)

Answer 3

hus*_*n39 5

写作：

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，9 月前
查看次数：	80332 次
最近记录：	6 年前