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 时得到的结果。
菜单项与其他项重叠。
这里是引导程序代码:
<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>
bootstrap中的css类设置的位置是bs-docs-sidenav
and affix
我相信。
twitter bootstrap 的 docs.css 的 css 是this http://twitter.github.com/bootstrap/assets/css/docs.css
请任何人帮忙尽快解决这个问题。
您正在使用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;">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)