Question

我从手机菜单中遇到了一些奇怪的问题。当我想为小型，中型，大型设备4列下拉菜单创建一个版本时。

在Extra Small Devices上的菜单＆lt; 768px：

点击Link1＆gt; TEST 他带我到LINK2下的网址。为什么呢？

如果点击Link3＆gt; TEST （Aslo 4栏菜单，用于更大的设备）一切都好。

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Test menu</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->


<style>
body{
    background: #000000;

}


.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
  border-bottom: 3px solid transparent;

}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  border-bottom: 3px solid transparent;
  background: none;

}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
 color: #ffffff;

}
.dropdown-menu{
      -webkit-box-shadow: none;
    box-shadow:none;

}



.navbar-toggle .icon-bar{
    color: #fff;
    background: #fff;
}



@media(min-width:768px) {
     #double li  { width:25%;
    float:left;
  display:inline;
  margin-bottom: 14px;


}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: 500px;

}
}

@media(max-width:767px) {
     #double li  { width:100%;
    float:left;
  display:inline;



}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: auto;

}

}


</style>


</head>
<body>
    <div class="navbar-wrapper">
    <div class="container-fluid">
        <nav class="navbar navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Logo</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#" class="">Home</a></li>
                        <li class=" dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link1 <span class="caret"></span></a>
                           <ul class="dropdown-menu" id="double">
                                <li>
                                    <a href="http://www.example1.com">TEST</a>
                                </li>
                                <li>
                                    <a href="http://www.example2.com">TEST</a>
                                </li>
                                <li>
                                    <a href="http://www.example3.com">TEST</a>
                                </li>
                                 <li>
                                    <a href="http://www.example4.com">TEST</a>
                                </li>
                            </ul>

                        </li>
                        <li><a href="http://www.example5.com">Link2</a></li>

                        <li class=" dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link3 <span class="caret"></span></a>
                            <ul class="dropdown-menu" id="double">
                                <li><a href="http://www.example6.com">Test1</a></li>
                                <li><a href="http://www.example7.com">Test2</a></li>
                                <li><a href="http://www.example8.com">Test3</a></li>
                                <li><a href="http://www.example9.com">Test4</a></li>
                            </ul>
                        </li>

                    </ul>

                </div>
            </div>
        </nav>
    </div>
</div>


    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>


</body>

</html>

好的我解决了这个问题。 如果有人遇到同样的问题，答案是

@media(min-width:768px) {  
 #double { 
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4; 
}

@media(max-width:767px) {
     #double {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
}

Answer 1

您已经为这两个下拉列表提供了相同的ID。不确定为什么会导致您获得的行为，但修复这些修复了菜单：

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#" class="">Home</a></li>
    <li class=" dropdown">
      <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link1 <span class="caret"></span></a>
      <ul class="dropdown-menu" id="double1">
        <li>
          <a href="http://www.example1.com">TEST</a>
        </li>
        <li>
          <a href="http://www.example2.com">TEST</a>
        </li>
        <li>
          <a href="http://www.example3.com">TEST</a>
        </li>
        <li>
          <a href="http://www.example4.com">TEST</a>
        </li>
      </ul>

    </li>
    <li><a href="http://www.example5.com">Link2</a></li>

    <li class=" dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link3 <span class="caret"></span></a>
      <ul class="dropdown-menu" id="double2">
        <li><a href="http://www.example6.com">Test1</a></li>
        <li><a href="http://www.example7.com">Test2</a></li>
        <li><a href="http://www.example8.com">Test3</a></li>
        <li><a href="http://www.example9.com">Test4</a></li>
      </ul>
    </li>

  </ul>

</div>

通常情况下，我会做一个可运行的片段，但你的样式被这里的Bootstrap样式覆盖了。

Bootstrap 3移动下拉菜单链接

1 个答案: