如何自定义Bootstrap的侧边栏/导航栏？

Question

我需要使用Twitter Bootstrap侧边栏来创建我的Web应用程序中的菜单（在红色框中突出显示）。

为了创建如下所示的菜单。顶部项目有一个下拉菜单，如下图所示。菜单中的下一个项应该出现在此下方。但是当我使用CSS时，我得到了以下结果。

菜单项重叠在其他菜单项上。

这是Bootstrap代码：

<div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix">
      <li class="active"><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li>
      <li class=""><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li>
      <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li>
      <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li>
      <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li>
      <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li>
      <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li>
      <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li>
      <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
      <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li>
      <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li>
      <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li>
      <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li>
      <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li>
    </ul>
  </div>

以下是我的代码：

 <div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix">
        <li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-user"></i>dany
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a id="logout" href="#">Sign Out</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav `affix`">
        <li><a href="#approval" id="approval"></i>Approval Requests</a></li>
        <li><a href="#setting" id="setting"></i>Settings</a></li>
    </ul>
</div>

在Bootstrap中设置位置的CSS类名是bs-docs-sidenav和affix。Twitter Bootstrap的文档.css的CSS可以在这里找到。

请有空帮忙尽快解决这个问题，谢谢。

- dany

Answer 1

你在两个菜单上都使用了 span3。这意味着第二个菜单将被放置在右侧的下一个网格中，而不是在第一个菜单下面。

我认为你应该像这样开始 -

<div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix">
        <li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-user"></i>dany
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a id="logout" href="#">Sign Out</a></li>
            </ul>
        </li>
    </ul>

    <ul class="nav nav-list bs-docs-sidenav affix">
        <li><a href="#approval" id="approval"></i>Approval Requests</a></li>
        <li><a href="#setting" id="setting"></i>Settings</a></li>
    </ul>
</div>

现在在第二个菜单上应用一些 CSS，例如：

<ul class="nav nav-list bs-docs-sidenav affix" style="top: 200px;">

- Salman

Answer 2

你创建了两个span3 bs-docs-sidebar的div，因此你看到了并排的侧边栏。如果你想让菜单“dany”固定在顶部，那么最好使用<div class="navbar navbar-inverse navbar-fixed-top">将它们放在顶部栏上。

- arunky