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

试试这个：

1. 简化您的HTML代码as Lucas Watson advised
2. 让.navbar-header和.navbar-right浮动
3. 为移动下拉列表添加CSS from this answer

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

＆＃13;
＆＃13;
@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;
  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

发生了什么事情，您将自定义下拉列表放在＆＃34; bs-slide-dropdown＆＃34; 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 3

将navbar-defaul t或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>