Question

我正在努力让我的网站标题响应，我在汉堡菜单上遇到了麻烦。我的标题设计方式，导航栏在平板电脑上中断。我的导航栏设置为hidden-xs hidden-sm hidden-md类，工作正常。问题是汉堡菜单只显示在xs和sm上。添加visible-md-block类即使在小于平板电脑的设备上也不会显示汉堡菜单。只有一个白色的背景，没有别的东西....所以它只是一个白色的边框。如何在比桌面小的任何东西上显示汉堡菜单？

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed  visible-xs-block visible-sm-block visible-md-block" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul id="menu-menu-1" class="nav navbar-nav hidden-md hidden-sm">
      <li><a title="Home" href="#">Home</a></li>
      <li><a title="Blog" href="#">Blog</a></li>
      <li><a title="Portfolio" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
        <ul role="menu" class=" dropdown-menu">
          <li><a title="Development Projects" href="#">Development Projects</a></li>
          <li><a title="Website Templates" href="#">Website Templates</a></li>
          <li><a title="Photo Gallery" href="#">Photo Gallery</a></li>
          <li><a title="Graphic Design" href="#">Graphic Design</a></li>
        </ul>
      </li>
      <li><a title="Resources" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
        <ul role="menu" class=" dropdown-menu">
          <li><a title="HTML &amp; CSS" href="#">HTML &#038; CSS</a></li>
          <li><a title="JavaScript &amp; jQuery" href="#">JavaScript &#038; jQuery</a></li>
          <li><a title="PHP and MySQL" href="#">PHP and MySQL</a></li>
        </ul>
      </li>
      <li><a title="Services" href="#">Services</a></li>
      <li><a title="About" href="#">About</a></li>
      <li><a title="Contact" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

使用bootstrap可见 - * - 块类，您必须指定要显示的每个大小。因此，如果您添加visible-sm-block和visible-xs-block，您应该能够在小型和超小型设备上看到您的汉堡包菜单。

http://getbootstrap.com/css/#responsive-utilities

看起来您还需要删除隐藏的类，然后将可见类移动到navbar-header div： class =“navbar-header visible-xs-block visible-sm-block visible-md-block”

如何在平板电脑上显示bootstrap的汉堡包菜单？

1 个答案: