Bootstrap 下拉菜单在移动设备上消失

Question

我制作了一个只有下拉菜单的导航栏。当我在移动设备上查看网站时，下拉菜单消失了，折叠菜单也没有出现。不确定如何修复它。

这是菜单的样子，

关闭打开

在手机上

这是html

<div class="navbar navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <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" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a></li>
            <li><a ui-sref="cards">My Sets</a></li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>

如何让菜单显示在移动设备上？

Answer 1

发生的事情是您将自定义下拉菜单放入 "bs-slide-dropdown" div，Bootstrap 通常会在移动设备上隐藏并创建一个下拉菜单。

你可以做的是 A) Bootstrap 3 - disable navbar collapse

或 B) 将您的代码简化为如下所示：

<div class="navbar navbar-light" role="navigation">
  <div class="container">

  <div class="navbar-header">
    <a class="navbar-brand" ui-sref="cards">NotePail</a>
  </div>

  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
      <ul class="dropdown-menu">
        <li><a ui-sref="account">My Account</a></li>
        <li><a ui-sref="cards">My Sets</a></li>
        <li class="divider"></li>
        <li><a href="server/logout">Logout</a></li>
      </ul>
    </li>
  </ul>

（您可能需要弄乱这个才能正确定位）

Answer 2

将 navbar-default 或 navbar-inverse 添加到 .navbar div 以显示切换样式，然后您将看到用于打开菜单的移动切换按钮。或者写一些 CSS 来设置图标栏的样式。参见 Navbar

使用默认样式示例：

.navbar.navbar-light {
  background: #1086AD;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <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" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a>
            </li>
            <li><a ui-sref="cards">My Sets</a>
            </li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

用你自己的例子 CSS:

.navbar.navbar-light {
  background: red;
}
.navbar.navbar-light .icon-bar {
  background: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-static-top navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <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" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a>
            </li>
            <li><a ui-sref="cards">My Sets</a>
            </li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

试试这个：

简化您的 HTML-代码
使.navbar-header和.navbar-right浮动
为移动下拉列表添加 CSS

请检查结果。这是你想要达到的目标吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (max-width: 767px) {
  .navbar-header {
    float: left;
  }
  .navbar-right {
    float: right !important;
  }
  
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

<div class="navbar navbar-light" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="cards">NotePail</a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
        <ul class="dropdown-menu">
          <li><a ui-sref="account">My Account</a></li>
          <li><a ui-sref="cards">My Sets</a></li>
          <li class="divider"></li>
          <li><a href="server/logout">Logout</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap 下拉菜单在移动设备上消失

Bootstrap dropdown menu disappears on mobile

html

css

navbar

twitter-bootstrap

drop-down-menu