Bootstrap收起列表以选择下拉菜单

Question

使用Bootstrap，我有一个无序的列表，我想折叠成一个选择/选项下拉列表中的大小xs，我目前正在做2个div，一个隐藏sm， md和lg，另一个隐藏了xs。

虽然这个工程有总是冗余的代码没有被显示，可以改进？

<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs"> 
<ul id="myList"> 
<li><a href="http://someurl1">url 1</a></li> 
<li><a href="http://someurl2">url 2</a></li> 
<li><a href="http://someurl3">url 3</a></li> 
</ul> 
</div> 
<div class="col-xs-3 hidden-sm hidden-md hidden-lg"> 
<select name="mySelect" ONCHANGE="location = this.options[this.selectedIndex].value;"> 
<option value="http://someurl1">url 1</option> 
<option value="http://someurl2">url 2</option> 
<option value="http://someurl3">url 3</option> 
</select> 
</div> 

Answer 1

hidden-sm hidden-md hidden-lg被equivilent到visible-xs

更大的屏幕尺寸也从较低的屏幕尺寸继承列的宽度，所以col-md-3 col-lg-3 col-sm-3仅需要col-sm-3

除此之外，你可以尝试像保持UL东西对于移动设备，在其前面放置移动设备，并将其包装在position: relative格中，然后使用悬停设备&重点显示/隐藏导航菜单。因此，HTML是这样的：

<div class="col-xs-3"> 
    <div class="nav-wrapper"> 
     <div class="visible-xs mobile-tab">Nav</div> 
     <ul id="myList"> 
      <li><a href="http://someurl1">url 1</a></li> 
      <li><a href="http://someurl2">url 2</a></li> 
      <li><a href="http://someurl3">url 3</a></li> 
     </ul> 
    </div> 
</div> 

使用CSS这样的：

.nav-wrapper { 
    position: relative; 
} 

@media screen and (max-width: 767px) { 
    .nav-wrapper .mobile-tab { 
     height: 15px; 
     line-height: 15px; 
     background-color: #c0c0c0; 
    } 

    #myList { 
     display: none; 
     position: absolute; 
     top: 15px; 
     left: 0; 
    } 

    .nav-wrapper .mobile-tab:hover + #myList, 
    .nav-wrapper .mobile-tab:focus + #myList { 
     display: block; 
    } 
}