如何自定义bootstrap sidebar / sidenav？ [英] How to customize bootstrap sidebar/sidenav?

问题描述

我需要使用Twitter Bootstrap Sidebar在我的网络应用程序中创建菜单（突出显示为红色）。

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

创建如下所示的菜单。

To create a menu as shown below.

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

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.

菜单项与另一个重叠。

这里是 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的docs.css的css是此

The css class in bootstrap setting the position is bs-docs-sidenav and affix I belive. The css of docs.css of twitter bootstrap is this

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

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

推荐答案

您在两个菜单上都使用 span3 。

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

我相信你应该这样开始 -

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>

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

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

< ul class =nav nav-list bs-docs-sidenav affixstyle =top：200px;>

这篇关于如何自定义bootstrap sidebar / sidenav？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！