Html 引导程序3-是否可以不折叠导航栏,并将侧栏折叠到导航栏菜单?
我试图使导航栏不被折叠,并将侧栏折叠到导航栏菜单 目前这是我的导航栏: 目前该菜单仅使用GlyphIcon,因此我认为在mobile view中,最好不要将它们折叠到navbar push open菜单中 在移动模式下: 导航栏菜单项将折叠到下拉菜单中 目前,这是我的html代码:Html 引导程序3-是否可以不折叠导航栏,并将侧栏折叠到导航栏菜单?,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我试图使导航栏不被折叠,并将侧栏折叠到导航栏菜单 目前这是我的导航栏: 目前该菜单仅使用GlyphIcon,因此我认为在mobile view中,最好不要将它们折叠到navbar push open菜单中 在移动模式下: 导航栏菜单项将折叠到下拉菜单中 目前,这是我的html代码: <!-- Top Navigation Bar --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
<!-- Top Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebStats</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-th"></a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></a></li>
<li><a href="#"><span class="glyphicon glyphicon-home"></a></li>
<li><a href="{% url 'WebApp:logout'%}"><span class="glyphicon glyphicon-off"></a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a href="{% url 'WebApp:index'%}"><span class="glyphicon glyphicon-stats"></a></li>
<li><a href="#toggleMenu"><span class="glyphicon glyphicon-indent-left"></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" data-no-collapse="true">
<li><a href="{% url 'WebApp:addChart'%}">Add</a></li>
<li><a href="{% url 'WebApp:editChart'%}">Edit</a></li>
<li><a href="#removeChart">Remove</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Middle Navigation Area -->
<div class="container-fluid">
<div class="row">
<div class="wrapper">
<div class="sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="{% url 'WebApp:index'%}"><span class="glyphicon glyphicon-dashboard"></span> Overview</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Reports</a></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Analytics</a></li>
<li><a href="#"><span class="glyphicon glyphicon-upload"></span> Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#simpleShare"><span class="glyphicon glyphicon-share"></span> SimpleShare</a></li>
</ul>
</div>
</div>
</div>
</div>
似乎关键在于:
<div class="navbar-collapse collapse">
我通过删除navbar collapse类和移动视图的折叠按钮以及一些css代码解决了您的navbar问题 HTML
对于侧边栏,只需将导航栏中间部分替换为侧边栏内容我想也许可以将侧边栏放到下拉列表中,因为侧边栏可能会变长。@creimers:请不要删除非版本特定的标记(在这种情况下,添加更特定的标记(
twitter-bootstrap-3
).保留这两个标签,因为不是每个人都浏览这两个标签。
<div class="navbar-collapse collapse">
.nav.navbar-nav > li
{
float:left;
}
<!-- Top Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebStats</a>
</div>
<div class="">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-th"></a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></a></li>
<li><a href="#"><span class="glyphicon glyphicon-home"></a></li>
<li><a href="{% url 'WebApp:logout'%}"><span class="glyphicon glyphicon-off"></a></li>
</ul>
<ul class="nav navbar-nav navbar-middle visible-xs">
<li><a href="#"><span class="glyphicon glyphicon-th"></a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></a></li>
<li><a href="#"><span class="glyphicon glyphicon-home"></a></li>
<li><a href="{% url 'WebApp:logout'%}"><span class="glyphicon glyphicon-off"></a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a href="{% url 'WebApp:index'%}"><span class="glyphicon glyphicon-stats"></a></li>
<li><a href="#toggleMenu"><span class="glyphicon glyphicon-indent-left"></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" data-no-collapse="true">
<li><a href="{% url 'WebApp:addChart'%}">Add</a></li>
<li><a href="{% url 'WebApp:editChart'%}">Edit</a></li>
<li><a href="#removeChart">Remove</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
@media (max-width: 768px)
{
.nav > li
{
float:left;
}
.nav.navbar-nav.navbar-left
{
float:left;
}
.nav.navbar-nav.navbar-middle
{
float:right;
}
.nav.navbar-nav.navbar-right
{
float:right;
}
}