Как удалить эту горизонтальную полосу прокрутки в 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>

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

Ответ 1

По Документация по Bootstrap 3:

Строки должны быть размещены внутри контейнера (фиксированной ширины) или жидкости-контейнера (полная ширина) для правильного выравнивания и заполнения.

Поэтому добавьте класс 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".

Ответ 2

Просто скопируйте этот код в свой CSS, он отключит вашу горизонтальную полосу прокрутки.

body {overflow-x: hidden;}

Ответ 3

Пишу:

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

в вашем CSS, это способ решить эту проблему

Ответ 4

Проблема в основном вызвана из-за отсутствия родителя .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 -->

Ответ 5

В моем случае у меня был один тег div класса контейнера-жидкости в другом теге div класса контейнера-жидкости. Удаление одного из них устранило проблему.

Ответ 6

Скопируйте и вставьте это в код CSS

   html, body {
     overflow-x: hidden;
   }

Ответ 7

Привет каждый добавить еще один класс над строкой... убрать горизонтальную прокрутку на веб-странице.