css - etiqueta - quitar espacio entre row bootstrap
Misteriosos espacios en blanco entre Bootstrap2 Navbar y la fila debajo (2)
Estoy usando la barra de navegación de Bootstrap y la cuadrícula de Bootsrap para mostrar una barra de navegación con una imagen inmediatamente debajo de la barra de navegación. Sin embargo, por alguna razón, hay espacios en blanco entre esta barra de navegación y la imagen. Cuando uso firebug para investigar la ubicación del espacio en blanco, parece que la barra de navegación está alineada en la parte superior dentro de su contenido. Intenté solucionar esto usando CSS para alinear la barra de navegación en la parte inferior, sin éxito.
¿Cómo puedo eliminar este espacio en blanco?
¡Gracias!
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider"><a href="#">PROJECTS</a></li>
<li class="divider"><a href="#">ABOUT US</a></li>
<li class="divider"><a href="#">THE TEAM</a></li>
<li class="divider"><a href="#">EVENTS</a></li>
<li class="divider"><a href="#">MEETINGS</a></li>
<li><a href="#">RESOURCES</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Aquí está mi desesperado intento de solucionar este problema usando CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url(''../images/someImage.jpg'') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
¿Por qué pones clases: span12 offset3 ?
Bootstrap tiene 12 columnas predeterminadas. así que si no lo cambiaste intenta poner:
span9 offset3 o simplemente span12 .
Es posible que desee anular el margin-bottom: 20px de la navbar de navbar :
.navbar {
margin-bottom: 0;
}
Algo así: http://jsfiddle.net/q4M2G/ (el !important está aquí solo para anular el estilo de la versión CDN del programa de arranque que estoy usando en jsfiddle, pero no debería necesitar usarlo si su estilo es correcto anula los estilos de arranque)