it-swarm.com.de

Geheimnisvoller Whitespace zwischen Bootstrap2 Navbar und einer Reihe darunter

Ich verwende die Navbar von Bootstrap und das Raster von Bootsrap, um eine Navbar mit einem Bild direkt unter der Navbar anzuzeigen. Aus irgendeinem Grund gibt es jedoch Leerzeichen zwischen dieser Navbar und dem Bild. Wenn ich mit Firebug die Position des Whitespaces untersuche, sieht es so aus, als ob die Navbar innerhalb ihres Containers nach oben ausgerichtet ist. Ich habe versucht, dies zu beheben, indem ich die Navbar mit CSS nach unten ausrichtete, ohne Erfolg.

Wie kann ich diesen Whitespace beseitigen? 

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

Hier ist mein verzweifelter Versuch, dieses Problem mit CSS zu beheben:

#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;
}
28
BigSauce

Möglicherweise möchten Sie den margin-bottom: 20px von navbar überschreiben:

.navbar {
    margin-bottom: 0;
}

Etwas in der Art: http://jsfiddle.net/q4M2G/ (Der !important dient hier nur dazu, den Stil der CDN-Version von Bootstrap zu überschreiben, die ich im jsfiddle verwende. Dies sollte jedoch nicht erforderlich sein Verwenden Sie es, wenn Ihr Stil Bootstrap-Stile korrekt überschreibt.

87
tchap

Warum setzen Sie Klassen: span12 offset3?

Bootstrap hat standardmäßig 12 Spalten. Wenn Sie es also nicht geändert haben, versuchen Sie:

span9 offset3 oder nur span12.

0
Andrea Turri