Que tal amigos, tengo un problema con el scroll horizontal, ya que no quiero que aparezca en mi página. Pensaba que había diseñado mal la estructura de las columnas, así que decidí nada mas dejar documento únicamente con la barra de navegación y de todas formas me sigue saliendo este scroll. Se que con CSS se puede ocultar pero yo no lo quiero ocultar yo quiero eliminar este scroll.
Este es mi código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Proyecto_ATI </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style-site.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <header> <div id="logo"> <a href="index.html" class="visible-xs"><img src="img/logo4.png" class="img-responsive" alt="Responsive image"></a> <a href="index.html" class="visible-sm"><img src="img/logo4.png" class="img-responsive" alt="Responsive image"></a> <a href="index.html" class="visible-md"><img src="img/logo4.png" class="img-responsive" alt="Responsive image"></a><p class="logo-head fuente">Piensa, Crea, Comparte.</p> </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header "> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-search"></span> </button> <a class="navbar-brand fuente" href="index.html">Proyecto_ATI</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav "> <li class="active"><a class="fuente" href="index.html"><span class="icon-home"></span> Home</a></li> <li><a class="fuente" href="compartir.html"><span class="icon-share2"></span> Compartir</a></li> <li ><a class="fuente" href="buscar.html"><span class="glyphicon glyphicon-search"></span> Buscar</a></li> <li><a class="fuente" href="ayuda.html"><span class="glyphicon glyphicon-question-sign"></span> Ayuda</a></li> </ul> <div class="navbar-right" role="search"> <ul class="nav navbar-nav"> <li><a class="fuente" href="registrar.html">Registrarse</a></li> <li class="dropdown" id="menuLogin"> <a class="dropdown-toggle fuente" href="#" data-toggle="dropdown" id="navLogin"><span class=" icon-user"></span> Login</a> <div class="dropdown-menu" style="padding:20px;"> <form class="form" id="formLogin"> <div class="form-group"> <label for="email">Nombre de usuario(*)</label> <input type="text" class="form-control" placeholder="Introduce un nombre de usuario" required> </div> <div class="form-group"> <label>Contraseña (*)</label> <input type="password" class="form-control" id="password1" placeholder="Contraseña"required> </div> <div class="form-group"> <button type="submit" class="btn fuente btnLogin">Enviar</button> <a id="olvido-password"href="#">Olvido su contraseña</a> </div> </form> </div> </li> </ul> </div> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <form class="hidden-sm hidden-md hidden-lg navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </nav> <div id="popup"> <div class="contenido-popup"> <h2 class="fuente">Recuperar Contraseña</h2> <form class="form" id="formLogin"> <div class="form-group"> <label for="email">Correo electrónico o nombre de usuario(*)</label> <input type="text" class="form-control" placeholder="Introduce correo electrónico o un nombre de usuario" required> </div> <div class="form-group"> <button type="submit" class="btn fuente btnLogin">Enviar</button> <button type="button" class="btn fuente btnLogin" id="cerrar">Cancelar</button> </div> </form> </div> </div> </header> </div> </div> </div> </body> </html>
Respuestas
@ErickaAMontero he probado el código HTML que nos indicas y la página se me ve bien sin ningún scroll horizontal. Además, mirando el contenido HTML de la página no veo nada raro. ¿Puede ser que los estilos CSS que estás aplicando con los archivos css/style-site.css y css/style.css provoquen ese scroll? Nos ayudaría bastante si nos enseñaras un pantallazo del error.
@javiereguiluz
19 febrero 2015, 8:46
hola me pasa lo mismo hay envio mi codigo me sale barra horizontal y no la tengo programado uso bootstrap y jquery lo mas reciente.
<!DOCTYPE html>
@Cucutachina
4 diciembre 2015, 17:22
y si le pones al <body>:
body { overflow-x: hidden; }
@blogdopata
20 febrero 2016, 0:33