减少导航引导程序中的间距

Question

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

我有两个问题：

• 如何减少侧边栏中文本之间的垂直间距？在<ul>上减少margin-bottom没有任何作用。

• 如何减少侧边栏的水平间距？现在，如果你把鼠标悬停在"谷歌"上，你会看到高亮显示向右延伸了很长一段路。如果水平间距减小，同一div行上的其他<div class='span8'>会补偿额外的空间吗？

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

Answer 2

每个项的高度由li声明定义。

更改：

li {
    line-height: 20px;
}

在bootstrap.css中。

菜单宽度由引导.css:中的.span4规则决定

.span4 {
    width: 300px;
}

把它缩小，所有的子项目都会跟随。