2

Twitter Bootstrapでこのチュートリアルに従っています。

チュートリアルのデモはこちらです。

私はこの特定のコードで立ち往生しています（私はそれを少し変更して遊んでいました）：

<div class="row">
    <div class="span2">
        <div class="mysidebar">
            <ul class="nav nav-list">
                 <li class="nav-header">What we are?</li>
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Our Clients</a></li>
                 <li><a href="#">Our Services</a></li>
                 <li><a href="#">About Us</a></li>
                 <li><a href="#">Contact Us</a></li>
                 <li class="nav-header">Our Friend</li>
                 <li><a href="#">Google</a></li>
                 <li><a href="#">Yahoo!</a></li>
                 <li><a href="#">Bing</a></li>
                 <li><a href="#">Microsoft</a></li>
                 <li><a href="#">Gadgetic World</a></li>
            </ul>
        </div>
    </div>
    <div class="span8">
          .....
    </div>
</div>

2 つの問題があります。

  • サイドバーのテキスト間の垂直方向の間隔を狭めるにはどうすればよいですか? margin-bottomon を減らしても何も起こり<ul>ません。

  • サイドバーの水平方向のスペースを減らすにはどうすればよいですか? 現在、「Google」にカーソルを合わせると、ハイライトが右に長く伸びているのがわかります。水平方向の間隔を狭めた場合<div class='span8'>、同じ div 行の他の行で余分なスペースが補われますか?

4

2 に答える 2

2

各項目の高さは、li 宣言によって定義されます。

変化する：

li {
    line-height: 20px;
}

bootstrap.css をより小さなものに変更します。

メニューの幅は、bootstrap.css の .span4 ルールによって決まります。

.span4 {
    width: 300px;
}

それを小さくすると、すべてのサブアイテムが続きます。

于 2013-08-28T18:51:16.230 に答える