html - Bootstrap 导航栏下拉菜单不起作用

Question

因此，我正在使用模板“Butterfly”开发 Bootstrap 网站，到目前为止，为移动设备调整大小时，除了导航栏之外，一切正常。由于某种原因，在移动设备上无法打开下拉菜单。我正在使用 PHP 包含标记轻松地在网站的每个页面上包含相同的导航栏，并允许对其进行轻松更新。

<?php include_once("template/menu.html"); ?>

导航栏代码:

<!--Mobile version of header-->
    <ul class="toggle">
      <li><a href="../index.php">Home</a></li>
      <li><span style="cursor:pointer">
        <div class="dropdown">
          <a class="dropdown-toggle disabled" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Properties
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Link 3<span class="label label-success label-as-badge">0 New</span></a></li>
            <li><a href="#">Link 2<span class="label label-success label-as-badge">3 New</span></a></li>
            <li><a href="#">Link 3<span class="label label-success label-as-badge">Nothing here</span></a></li>
          </ul>
        </div></span>
      </li>
      <li><a href="#work_outer">Links</a></li>
      <li><a href="#Portfolio">About</a></li>
      <li><a href="#client_outer">Apply</a></li>
    </ul>

这是导航栏的 CSS:

.nav-right{
    float:right;
    }

.nav ul{
    list-style:none;
    padding:0px;
    }
.nav ul.toggle{
    display:none;
    visibility:hidden;
    height:0px;
    overflow:hidden;
    margin-bottom: 0;
    }

.nav ul li{
    display:inline-block;
    margin:0 23px;
    }

.nav ul li:first-child{
    /*margin:0px;*/
    }

.nav ul li:last-child{
    margin:0 0 0 23px;
    }

.nav ul li a{
    display:block;
    font-size:14px;
    color:#222222;
    font-family:'Dosis';
    text-decoration:none;
    text-transform:uppercase;
    font-weight: 600;
    transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;    
    }
.nav ul li a:hover{
    color:#49b5e7;
    }

这是导航栏的更多 CSS。大多数是 bootstrap.css 的默认值，但我不确定:

.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #999999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.428571429;
  color: #999999;
}
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}

感谢阅读，非常感谢任何帮助。如果您需要更多信息，请询问，我会在我的代码中找到并发布。再次感谢大家!

Answer 1

您必须添加媒体查询 ( http://www.w3schools.com/cssref/css3_pr_mediaquery.asp )并更改该 css 中的下拉菜单