Question

我想制作一个没有折叠选项的bootstrap响应菜单。因此，在响应方面，菜单将在折叠时显示，因此无需单击菜单切换。这是菜单！

<section id="menuja2"><!-- Menuja 2-->
<nav class="navbar navbar-default menu2">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu2" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu2">
  <ul class="nav navbar-nav navbar-left">
    <li><a href="#">Roses</a></li>
    <li><a href="#">Lavendar</a></li>
    <li><a href="#">Carnations</a></li>
    <li><a href="#">Daises</a></li>
    <li><a href="#">Peonies</a></li>
    <li><a href="#">Irises</a></li>
    <li><a href="#">Baksets</a></li>
    <li><a href="#">Gifts</a></li>
    <li><a href="#">Arrangements</a></li>
    <li><a href="#">Sunflowers</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>

</section><!-- Fund Menuja 2 -->

Answer 1

只需将in课程添加到<div class="collapse navbar-collapse" id="menu2">：

<div class="collapse navbar-collapse in" id="menu2">
  <ul class="nav navbar-nav navbar-left">
    <li><a href="#">Roses</a></li>
    <li><a href="#">Lavendar</a></li>
    <li><a href="#">Carnations</a></li>
    <li><a href="#">Daises</a></li>
    <li><a href="#">Peonies</a></li>
    <li><a href="#">Irises</a></li>
    <li><a href="#">Baksets</a></li>
    <li><a href="#">Gifts</a></li>
    <li><a href="#">Arrangements</a></li>
    <li><a href="#">Sunflowers</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

更新小提琴：https://jsfiddle.net/sr5z9mag/1/

然后你可以删除按钮，或用它做任何你喜欢的事情......

没有button元素的另一个小提琴：https://jsfiddle.net/sr5z9mag/2/

如何在没有折叠选项的情况下在bootstrap中创建响应式菜单？

1 个答案: