html - 减少导航 Bootstrap 中的间距

Question

我在 Twitter Bootstrap 上关注本教程.

教程的演示是here .

我被困在这个特定的代码上(我稍微改变了一下来玩):

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

我有两个问题:

• 如何缩小边栏中文本之间的垂直间距？减少 margin-bottom在 <ul>什么都不做。

• 如何缩小侧边栏的水平间距？现在，如果您将鼠标悬停在“Google”上，您会看到突出显示向右延伸了很长一段路。如果水平间距减小，另一个<div class='span8'>会不会在同一个 div 行补偿额外的空间？

Answer 1

我假设“垂直间距”指的是导航底部和“会见我们的客户”顶部之间的空间。如果是这样，那么答案是“不是真的”。回想一下，您的导航是在一行中，行的高度由该行中最高的东西决定。这恰好是您第二列中的文本。

因此，占用侧边栏空间的唯一真正解决方案是:

1. 缩短右侧栏中的文字
2. 在导航下方添加一些内容以填充该空间

您可以将第二行的内容塞到第一行(将“会见我们的客户”放在导航下方，然后将其他两行(每个都带有 span6)放在当前内容之后第二列，但它看起来会很糟糕。所以不要这样做。

你的第二个问题是网格的问题。您已进行设置，以便您的导航占据 1/3 的空间，而您的内容占据 2/3。因此，除非您喜欢非常非常长的导航，否则您最终会得到那么多空间。

所以只需更改宽度即可。将 span4 更改为 span3 或 span2，然后将 span8 更改为 span9 或 span10 分别。重要的是一行的直接子行的跨度值总和为 12(4+8、3+9 等)。

如果你这样做(我认为 2 和 10 可能效果最好，你会发现你的第一个问题大大减少了，因为你现在有更多的文本宽度，所以它会占用更少的垂直空间，这意味着您最终会在导航下方获得更少的空间(如果有的话)。

更新

我认为举个例子是值得的。 http://jsfiddle.net/littlefyr/y9cTJ我所做的只是将跨度值设置为 span2 和 span10