0

HTML と CSS は初めてで、この 4 日間でコーディングを開始しました。物事を迅速に進めるには、ブートストラップが非常に便利であることがわかりました。

これは、透明で上部に固定された Navbar を取得しようとする私の試みです。

http://jsfiddle.net/revanur/mf5wc/4/

<!-- Top-Navigation-Bar -->
<div class="row-fluid">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner" id="topbar">
            <div class="container"> <a href="#"><img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" /></a>

                <button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <div class="nav-collapse">
                    <ul class="nav pull-right">
                        <li class="active">
                            <form class="navbar-search brand">
                                <input type="text" class="search-query" placeholder="Search">
                            </form>
                        </li>
                        <li><a href="#"> <h5> Discover </h5></a>
                        </li>
                        <li><a href="#"> <h5> Blog </h5></a>
                        </li>
                        <li class="dropdown">   <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>

                            <ul class="dropdown-menu">
                                <li><a href="#"> <h6> Login </h6></a>
                                </li>
                                <li><a href="#"> <h6> Signup </h6></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Top-Navigation-Bar -->

ただし、ブランド画像のサイズによってナビゲーションバーの高さが変わるようです。問題はありませんが、画像とナビゲーションバーの上下の間にかなりのスペースがあることに気付きました。どうすればこれを変更できますか。また、ナビゲーションバーが独自の心を持たないように、ナビゲーションバーのサイズを修正することは可能ですか。

4

2 に答える 2

7

ナビゲーションバーの高さに影響を与えるものがいくつかあります。

  1. div class = "navbar-inner"（5pxパディング）
  2. img class = "brand"（10pxパディング）
  3. 画像のサイズ

次の方法でパディングを削除できます。

img.brand {
  padding: 0;
}

および/またはナビゲーションバーの高さを指定できます。

div.navbar-inner {
    height: 10px;
}
于 2013-03-24T04:12:09.497 に答える
2

次のようなものを使用します。

.brand {height: 25px;}

デモ:フィドル

于 2013-03-24T04:06:53.900 に答える