Foros del Web » Creando para Internet » CSS »

Extraño espacio a la izquierda de navbar collapse -- bootstrap

Estas en el tema de Extraño espacio a la izquierda de navbar collapse -- bootstrap en el foro de CSS en Foros del Web. Buenas compañeros, estoy a vueltas con bootstrap, he buscado la solución en Stackoverflow pero no encuentro lo que busco. A la izquierda de mis botones ...
  #1 (permalink)  
Antiguo 13/03/2017, 07:02
Avatar de RAZGRIZ24  
Fecha de Ingreso: septiembre-2009
Mensajes: 143
Antigüedad: 14 años, 7 meses
Puntos: 2
Extraño espacio a la izquierda de navbar collapse -- bootstrap

Buenas compañeros, estoy a vueltas con bootstrap, he buscado la solución en Stackoverflow pero no encuentro lo que busco.

A la izquierda de mis botones aparece un extraño hueco que no soy capaz de eliminar ni "cancelando" los valores de padding y margin de bootstrap mediante !important.

Aquí os dejo una imagen:



La flecha indica lo que os digo. A parte del código normal de bootstrap, aquí os dejo el mío:

Código HTML:
<div class="bottom-nav-wrapper">
                <div class="navbar-header navbar-inverse">
                       <!-- collapse menu-->
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                               <span class="sr-only ">Toggle navigation
                                </span>
                                <span class="icon-bar">
                                </span>
                                <span class="icon-bar">
                                </span>
                                <span class="icon-bar">
                                </span>
                            </button>
                    </div>
                            <!--Navs-->
                   <div class="collapse navbar-collapse">
                        <ul class="comodin-ul">
                            <a class="main-nav" href="eventos/index.html">
                                <li>Inicio</li>
                            </a>
                            <a class="main-nav" href="eventos/index.html">
                                <li>Soluciones Comodín</li>
                            </a>
                            <a class="main-nav" href="eventos/index.html">
                                <li>Tarifas</li>
                            </a>
                            <a class="main-nav" href="eventos/index.html">
                                <li>Contacto</li>
                            </a>
                        </ul>
                    </div> 
            </div>
        </div> 
Y mi CSS:

Código CSS:
Ver original
  1. .bottom-nav-wrapper{
  2.     width: 100%;
  3.     height: 6vh;
  4.     background-color: #348aff;
  5.     float: left;
  6. }
  7. .comodin-ul {
  8.     display: block;
  9.     width: 100%;
  10.     margin: auto;
  11.     list-style-type: none;
  12.     border-bottom: 1px solid green;
  13. }
  14. a.main-nav{
  15.     border:1px solid red;
  16.     display: block;
  17.     width: 25%;
  18.     float: left;
  19.     text-align: center;
  20.     height: 6vh;
  21.     font-size: 2vh;
  22.     padding-top: 3vh;
  23.     line-height: 0;
  24.     color:#FFF;
  25. }
  26. a.main-nav:hover{
  27.     cursor: pointer;
  28.     color: #333;
  29.     background-color: white;
  30. }
  31. @media (max-width: 750px) {
  32.     .comodin-ul{
  33.         width: 100%;
  34.     }
  35.     a.main-nav{
  36.         float: none;
  37.         width: 100%;
  38.     }
  39.     .collapse, .navbar-collapse{
  40.         background-color: #f7f7f7;
  41.     }
  42. }
  43. /*Bootstrap modifications*/
  44. .navbar-inverse{
  45.     background-color: #348aff;
  46. }
  47. .navbar-toggle{
  48.     border: none;
  49.     background-color: #348aff;
  50.     color: white;
  51.     padding-top: 2.2vh;
  52. }
  53. .navbar-inverse .navbar-toggle .icon-bar {
  54.     background-color: #DEDEDE;
  55. }
  56. /*Aquí podéis ver lo que digo, he tratado de eliminar los paddings, pero no funcionó, ya he eliminado esa instrucción.*/
  57. .navbar-collapse {
  58.     padding: 0 !important;
  59.     margin: 0 !important;
  60.     left: 0 !important;
  61. }

Sospecho que tiene que ver con no haber añadido el logo vía bootstrap (navbar-brand), pero la verdad es que no lo sé.

Alguno de vosotros se ha encontrado algún problema similar alguna vez?

Muchas gracias chicos,

Mariano.
  #2 (permalink)  
Antiguo 14/03/2017, 08:23
Avatar de KATHYU  
Fecha de Ingreso: julio-2013
Mensajes: 547
Antigüedad: 10 años, 9 meses
Puntos: 46
Respuesta: Extraño espacio a la izquierda de navbar collapse -- bootstrap

Sorry no pude leer todo el código, estoy ocupada pero se me viene una idea.

Si todo ese código esta dentro de un div container creería que eso le genera ese espacio.
Ya intento poner todo el menu en un div fluid ?? esto le permitiría abarcar toda la pantalla del navegador con su menu
__________________
Al contrario de lo que muchos podrían afirmar, ayudar no te hace pobre, sino más rico.

Etiquetas: bootstrap, espacio, extraño, hover, izquierda, navbar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:00.