web-dev-qa-db-ja.com

Bootstrap 3でこの水平スクロールバーを削除する方法

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;
    }
}
htmlcsstwitter-bootstraptwitter-bootstrap-3
46
FatAlbert

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 docs を読むことに加えて、記事「 なぜBootstrap 3 Grid Worksの背後にある微妙な魔法 」を読むことをお勧めします。

87
Josh Crozier

このコードをCSSにコピーするだけで、水平スクロールバーが無効になります。

body {overflow-x: hidden;}
14
vasanth

書き込み：

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

あなたのCSSでは、この問題を解決する方法です

5
huseyin39

この問題は基本的に、親.containerが欠落しているために発生します。解決策は、行に.no-containerクラスを追加し、マージンを追加して、行クラスの負のマージンを補正することです。

以下の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 -->
0
Shyam Nath

私の場合、1つcontainer-fluid class div tagがあり、もう1つcontainer-fluid class div tagです。それらのいずれかを削除すると、問題が修正されました。

0
calceamenta