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>

我有两个问题：

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

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

4

2 回答 2

6

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

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

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

您可以将第二行的内容塞入第一行（在导航下方放置“与我们的客户会面”，然后在当前位于第二列的内容之后将另外两个排成一行（每个都有 span6），但它看起来很可怕. 所以不要这样做。

你的第二个问题是网格问题。你已经设置好了，你的导航占据了 1/3 的空间，你的内容占据了 2/3。所以除非你喜欢真的很长的导航，否则你最终会得到所有的空间。

所以只需改变宽度。分别更改span4为span3or span2，然后更改span8为span9or span10。重要的是一行的直接子代的跨度值之和为 12（4+8、3+9 等）。

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

更新

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

于 2013-08-28T19:06:07.507 回答
2

The height of each item is defined by the li declaration.

Change:

li {
    line-height: 20px;
}

in bootstrap.css to something smaller.

The width of the menu is determined by the .span4 rule in bootstrap.css:

.span4 {
    width: 300px;
}

Make that smaller and all the sub-items will follow.

于 2013-08-28T18:51:16.230 回答