Html 如何自定义引导侧边栏/sidenav？

How to customize bootstrap sidebar/sidenav?

提问by dany

I need to make use of Twitter Bootstrap Sidebar for creating a menu in my web application.(Highlighted in red).

我需要使用 Twitter Bootstrap Sidebar 在我的 Web 应用程序中创建一个菜单。（以红色突出显示）。

To create a menu as shown below.

创建如下所示的菜单。

The top item has a dropdown as shown in mage. And Next items in menu should come below this.But this is what I get when I use the css.

顶部项目有一个下拉菜单，如法师所示。菜单中的下一个项目应该在这个下面。但这就是我使用 css 时得到的。

Menu Item overlaping the other.

菜单项相互重叠。

Here is the bootstrap code:

这是引导程序代码：

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

Here is my code:

这是我的代码：

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

The css class in bootstrap setting the position is bs-docs-sidenavand affixI belive. The css of docs.css of twitter bootstrap is this

引导程序中设置位置的 css 类是bs-docs-sidenav，affix我相信。twitter bootstrap的docs.css的css是这个

Anyone please help to solve this issue as soon as possible.

请任何人尽快帮助解决此问题。

采纳答案by Salman

You are using span3on both of your menus. That means the second menu will be placed on the next grid on the right, not below the first menu.

您正在使用您的span3两个菜单。这意味着第二个菜单将放置在右侧的下一个网格上，而不是在第一个菜单下方。

I believe you should start like this-

我相信你应该这样开始——

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

Now apply some CSS on the second menu e.g.

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

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

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

回答by arunky

You have created two div of span3 bs-docs-sidebar and hence you are seeing sidebars in parallel. If you want menu 'dany' fixed on the top, then its better to put them on top bar using <div class="navbar navbar-inverse navbar-fixed-top">

您已经创建了 span3 bs-docs-sidebar 的两个 div，因此您看到的是并行的侧边栏。如果您希望菜单 'dany' 固定在顶部，那么最好使用<div class="navbar navbar-inverse navbar-fixed-top">