折叠后我的导航栏不显示项目列表

时间:2019-03-30 13:31:17

标签: html css bootstrap-4 toggle navbar

我希望我的导航栏在用户按下切换按钮时折叠后显示为列表,但它显示为一行而不是列表

This is how the navbar looks i dont want it

This is how i want it to look

python manage.py loaddata

1 个答案:

答案 0 :(得分:0)

怎么样?

<!-- Navbar -->
<nav class="navbar bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data- 
 toggle="collapse" data-target="#collapsibleNavbar" aria- 
 expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" 
id="collapsibleNavbar" style="">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="javascript:void(0)">Link</a>
  </li>    

<li>
<form class="form-inline">
      <div class="input-group">
        <input type="text" name="" placeholder="Search" 
class="form-control">
      </div>
</li>
</ul>
 </div>  
</nav>

<!-- End of navbar -->