Cómo eliminar esta barra de desplazamiento horizontal en Bootstrap

5 minutos de lectura

Avatar de usuario de FatAlbert
gordoalbert

Tengo este irritante desplazamiento horizontal en mi página de inicio. ¿No puede averiguar qué hace que se comporte así o qué hacer al respecto?

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

  • Vea mi comentario, solo agregue este código en su CSS, deshabilitará completamente su barra de desplazamiento horizontal.

    – vasanto

    31 de octubre de 2015 a las 6:37

según Documentación de Bootstrap 3:

Las filas deben colocarse dentro de un .container (ancho fijo) o .container-fluid (ancho completo) para una alineación y relleno adecuados.

Por lo tanto, agregue la clase container para usted .wrapper elemento.

Ejemplo actualizado

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

En cuanto a una explicación, el .row la clase tiene -15px márgenes a cada lado.

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

El .container class efectivamente desplaza eso con lo siguiente:

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

Además de leer el Bootstrap 3 documentosSugiero leer el artículo “La magia sutil detrás de por qué funciona Bootstrap 3 Grid“.

  • ¡Gracias! También resolvió mi problema de pie de página adhesivo que tampoco funcionó.

    – FatAlbert

    3 de enero de 2015 a las 21:16

  • En mi caso, no pude usar .container porque tiene ancho fijo en dispositivos más pequeños. Arreglo esto con .container-fluid.

    – Damjan Pavlica

    31 de mayo de 2016 a las 14:47


  • Muchas gracias. Hubo un desbordamiento debido al desplazamiento horizontal que se estaba aplicando de forma predeterminada. Al agregar class=”container-fluid” se alineó perfectamente.

    – Impromptu_Coder

    22 de marzo de 2018 a las 9:42


avatar de usuario de vasanth
vasanto

Simplemente copie este código en su CSS, deshabilitará su barra de desplazamiento horizontal.

body {overflow-x: hidden;}

  • Esto simplemente ocultará la barra de desplazamiento del navegador. El elemento .row seguirá estando fuera de los límites y tendrá problemas con la mayoría de los dispositivos móviles.

    –Romelis George

    4 de julio de 2016 a las 12:56

Escribiendo:

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

en tu CSS, es una forma de resolver este problema

Copia y pega esto en código CSS

   html, body {
     overflow-x: hidden;
   }

Configuración overflow-x: oculto; funciona pero afectará eventos de desplazamiento. Poner filas dentro del contenedor funcionó para mí.

avatar de usuario de shivgre
shivgre

El problema se debe básicamente a que falta el contenedor principal. La solución es que puede agregar una clase .no-container a la fila y agregar margin: 0 para compensar el margen negativo de la clase de fila.

Consulte el siguiente código de marcado CSS y 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 -->

avatar de usuario de calceamenta
calcificante

en mi caso yo tenia uno etiqueta div de clase de fluido de contenedor en otro etiqueta div de clase de fluido de contenedor. Eliminar uno de ellos solucionó el problema.

¿Ha sido útil esta solución?