web-dev-qa-db-fra.com

Comment supprimer cette barre de défilement horizontale dans Bootstrap 3

J'ai ce parchemin horizontal irritant sur ma page bootstrap. Vous ne pouvez pas comprendre ce qui le fait se comporter comme ceci ou quoi faire à ce sujet?

Lien 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

Selon documentation Bootstrap :

Les rangées doivent être placées dans un conteneur. (Largeur fixe) ou un fluide .container (largeur totale) pour un alignement et un remplissage corrects.

Par conséquent, ajoutez la classe container à votre .wrapper élément.

Exemple mis à jour 

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

En ce qui concerne une explication, le .row la classe a -15px marges de chaque côté.

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

Le .container _ class déplace effectivement cela avec ce qui suit:

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

En plus de la lecture du Bootstrap 3 docs , je vous suggère de lire l'article " La magie subtile derrière pourquoi Bootstrap 3 fonctionne de la grille) ".

87
Josh Crozier

Copiez simplement ce code dans votre CSS, cela désactivera votre barre de défilement horizontale.

body {overflow-x: hidden;}
14
vasanth

L'écriture:

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

dans votre CSS, est un moyen de résoudre ce problème

5
huseyin39

Le problème est essentiellement dû au fait que le conteneur parent est manquant. La solution est que vous pouvez ajouter une classe .no-container à la ligne et ajouter margin: 0 pour compenser la marge négative de la classe row.

Voir ci-dessous le code de balisage CSS et 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

Dans mon cas, j'avais un balise div de classe conteneur-fluid dans un autre balise div de classe conteneur-fluide. Supprimer l'un d'eux a résolu le problème.

0
calceamenta