29

Bootstrap の Navbar と Bootsrap のグリッドを使用して、Navbar のすぐ下に画像を表示する Navbar を表示しています。ただし、何らかの理由で、この Navbar と画像の間に空白があります。firebug を使用して空白の場所を調査すると、Navbar が含まれている 内で上揃えになっているように見えます。CSSを使用してナビゲーションバーを下に揃えることでこれを修正しようとしましたが、役に立ちませんでした。

この空白を削除するにはどうすればよいですか? 

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

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;
}
4

2 に答える 2

89

margin-bottom: 20pxfromをオーバーライドしたい場合がありますnavbar:

.navbar {
    margin-bottom: 0;
}

そのようなもの: http://jsfiddle.net/q4M2G/ (これ!importantは、jsfiddle で使用している CDN バージョンのブートストラップのスタイルをオーバーライドするためのものですが、スタイルがブートストラップを正しくオーバーライドする場合は使用する必要はありません。スタイル)

于 2013-02-25T16:50:12.463 に答える
0

クラスを配置する理由: span12 offset3?

Bootstrap には、デフォルトで 12 列があります。変更していない場合は、次のように入力してください。

span9 offset3または単にspan12。

于 2013-02-25T16:16:29.903 に答える