web-dev-qa-db-fra.com

Espaces blancs mystérieux entre Bootstrap2 Navbar et rangée dessous

J'utilise Navbar de Bootstrap et la grille de Bootsrap pour afficher une barre de navigation avec une image immédiatement sous la barre de navigation. Cependant, pour une raison quelconque, il y a un espace blanc entre cette barre de navigation et l'image. Lorsque j'utilise firebug pour rechercher l'emplacement des espaces, il me semble que la barre de navigation est alignée dans le haut de son contenu. J'ai essayé de résoudre ce problème en utilisant CSS pour aligner le bas de la barre de navigation, mais en vain.

Comment puis-je éliminer cet espace? 

<!-- 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>

Voici ma tentative désespérée de résoudre ce problème en utilisant 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;
}
csstwitter-bootstrapwhitespacenavbarremoving-whitespace
28
BigSauce

Vous voudrez peut-être remplacer le margin-bottom: 20px à partir de navbar:

.navbar {
    margin-bottom: 0;
}

Quelque chose comme ça: http://jsfiddle.net/q4M2G/ (Le !important est ici pour changer le style de la version CDN de bootstrap que j'utilise dans le jsfiddle mais vous ne devriez pas avoir besoin utilisez-le si votre style remplace correctement les styles bootstrap)

87
tchap

Pourquoi vous mettez des classes: span12 offset3?

Bootstrap a 12 colonnes par défaut. donc si vous ne l'avez pas changé essayez de mettre:

span9 offset3 ou simplement span12.

0
Andrea Turri