html – Bootstrap静态导航栏强制在小屏幕上展开

概述鉴于来自boostrap模板的这个菜单代码,我希望每个菜单项都堆叠并在检测到屏幕尺寸较小时占用整个宽度.基本上,与“三重条”菜单按钮被击中时相同的功能,除了用户不必手动按下它. 提前致谢. <!-- Static navbar --> <div class="navbar navbar-default"> <div class="navbar-header"> <butto @H_419_6@ 鉴于来自boostrap模板的这个菜单代码,我希望每个菜单项都堆叠并在检测到屏幕尺寸较小时占用整个宽度.基本上,与“三重条”菜单按钮被击中时相同的功能,除了用户不必手动按下它.

提前致谢.

<!-- Static navbar -->  <div >    <div >      <button type="button"  data-toggle="collapse" data-target=".navbar-collapse">        <span ></span>        <span ></span>        <span ></span>      </button>      <a  href="#">Project name</a>    </div>    <div >      <ul >        <li ><a href="#">link</a></li>        <li><a href="#">link</a></li>        <li><a href="#">link</a></li>      </ul>    </div><!--/.nav-collapse -->  </div>

解决方法 据我所知,您希望默认情况下可以看到所有菜单项,而无需用户点击三线(汉堡包)菜单,所有菜单项应在较小的屏幕上水平堆叠.

你上面的代码很好.只需在navbar-collapse div和所有集合中添加一个“in”类.

<div >    <div >      <button type="button"  data-toggle="collapse" data-target=".navbar-collapse">        <span ></span>        <span ></span>        <span ></span>      </button>      <a  href="#">Project name</a>    </div>    <div >      <ul >        <li ><a href="#">link</a></li>        <li><a href="#">link</a></li>        <li><a href="#">link</a></li>      </ul>    </div>

这是演示：http://jsfiddle.net/shekhardesigner/35gSz/

总结

以上是内存溢出为你收集整理的html – Bootstrap静态导航栏强制在小屏幕上展开全部内容，希望文章能够帮你解决html – Bootstrap静态导航栏强制在小屏幕上展开所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。