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与visible-xs

无效

较大的屏幕尺寸也会从较小的屏幕尺寸继承列宽，因此col-md-3 col-lg-3 col-sm-3只需col-sm-3

除此之外，您可以尝试将ul保留为移动设备，在其前面放置仅限移动设备的元素，并将其包装在position: relative div中，然后使用悬停＆amp;专注于显示/隐藏导航菜单。所以，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;
    }
}

Bootstrap折叠列表以选择下拉列表

1 个答案: