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>无效。
如何减少侧边栏的水平间距？现在，如果你将鼠标悬停在“谷歌”上，你会看到突出显示向右延伸很长一段时间。如果水平间距减小，同一div行中的另一个<div class='span8'>是否会补偿额外的空间？

Answer 1

我将假设“垂直间距”是指导航底部与“与我们的客户见面”之间的空间。如果是这样，那么答案就是“不是真的”。回想一下，您的导航是连续的，行的高度由该行中最高的东西决定。这恰好是你的第二栏中的文字。

因此，您在侧栏中占据房间的唯一真正解决方案是：

将文字缩短为右栏
在导航下方添加内容以填充该空间

你可以将第二行的内容堵塞到第一行（在导航下方放置“遇见我们的客户”，然后在内容当前进入后连续放入其他两个（每个都有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中更小的东西。

菜单的宽度由bootstrap.css中的.span4规则确定：

.span4 {
    width: 300px;
}

将它缩小，所有子项都将跟随。

减少nav bootstrap中的间距

2 个答案: