引导v3 css问题与智能手机中的下拉列表

Question

The site I'm working on works fine in a desktop and tablet, but the hamburger nav version in my iPhone doesn't open the sub menus. It just closes the nav when the item is selected.

I localized the culprit tag. When I remove the class 'mbr-navbar__menu', the dropdown does work, but it's visible and misaligned.

Here is the css in question:

 .mbr-navbar__menu-box { display: table; width: 100%; } .mbr-navbar__menu-box--inline-left, .mbr-navbar__menu-box--inline-center, .mbr-navbar__menu-box--inline-right { display: block; text-align: left; } .mbr-navbar__menu-box--inline-center { text-align: center; } .mbr-navbar__menu-box--inline-right { text-align: right; } 

Here is the test page I'm working on.

I hope this is enough information. Basically, I just want the dropdowns to work, with the styling that the 'mbr-navbar__menu' class provides.

Answer 1

For hamburgers to work, you need to have this part, especially the icon-bar part:

<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

Refer to here for more info http://getbootstrap.com/components/#navbar