Bootstap:Span类图标栏不起作用 [英] Bootstap:span class icon bar not working
问题描述
我已经使用span class图标栏显示了三行符号，调整了窗口的大小之后，其他组件应该显示在该图标下.但是，当我调整窗口大小时，它仅显示该图标，并且在单击它之后没有任何反应 这是我所做的: 怎么了? 预先谢谢你
I have used span class icon bar to display that three lines symbol after resizing the windows and other components should get displayed under that icon. But when I resize the window it only shows that icon and after clicking on it nothing happens This what I have done : what's gone wrong? Thank you in advance
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<! Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'ontheway:index' %}"> Way2go </a>
</div>
<! Items -->
<div class="collapse navbar-collapse" id="#topNavBar">
<ul class="nav navbar-nav">
<li class="active">
<a href="{% url 'ontheway:index' %}">
<span aria-hidden="true"></span> Home
</a>
</li>
<li class="">
<a href="#">
<span aria-hidden="true"></span> Hotels
</a>
</li>
<li class="">
<a href="#">
<span aria-hidden="true"></span> Homestays
</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search" method="get" action="#">
<div class="form-group">
<input type="text" class="form-control" name="q" value=""placeholder="Search tourist places,hotels, homestays here">
</div>
<button type="submit" class="btn btn-default"> Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span> Notifications
</a>
<li class="">
<a href="#">
<span aria-hidden="true"></span> Log in
</a>
</li>
<li class="">
<a href="#">
<span aria-hidden="true"></span> Sign up
</a>
</li>
</ul>
</div>
</div>
</nav>
推荐答案
@pratik jaiswal，您的问题源自使用collapse类的元素上id属性的值.
@pratik jaiswal, your issue stems from the value of the id attribute on your element with the collapse class.
<!-- Header ---->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'ontheway:index' %}"> Way2go </a>
</div>
<!-- Items ---->
<div class="collapse navbar-collapse" id="#topNavBar"> <!--Take out the hash symbol-->
...
您可以将其与前导#一起使用.如果将其取出，您的问题将得到解决.
You have it with a leading #. If you take that out, your issue will be resolved.
您可以在此 codeply 中看到它的作用.
You can see it in action in this codeply.
这篇关于Bootstap:Span类图标栏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
