如何在 Bootstrap 中创建一个没有折叠选项的响应式菜单?

aamkag61  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(1)|浏览(134)

我想做一个引导响应菜单没有折叠选项。所以在响应方面的菜单将显示,因为它是折叠的,所以没有点击菜单切换。这里是菜单!

<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 -->
2exbekwf

2exbekwf1#

只需将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 -->

更新的Fiddle:https://jsfiddle.net/sr5z9mag/1/
然后您可以删除按钮,或做任何您喜欢的...
另一个没有button元素的小提琴:https://jsfiddle.net/sr5z9mag/2/

相关问题