html - 响应式 Bootstrap 导航菜单

Question

所以我想创建一个响应式菜单，在桌面上我的导航栏基本上是 3 个链接和 3 个小图片，它们也是链接。

当我移动到小屏幕时，我希望 3 个小图片保持原样，但将文本链接放入下拉菜单中。

这是我目前适用于桌面屏幕的代码:

<div class="container">
    <ul class="nav nav-pills">
        <li class="hidden-xs hidden-sm"><a href="#">Home</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Help</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Blog</a></li>
        <li><a href="#"><span class="search"></span></a></li>
        <li><a href="#"><span class="checkout"></span></a></li>
        <li><a href="#"><span class="home"></span></a></li>
    </ul>
</div>

所以这对大屏幕有好处。

我想获取前 3 个元素，而不是将它们隐藏在小/xs 屏幕上，我希望它们移动到下拉菜单中。

Answer 1

Working Fiddle

我已经创建了一个下拉列表，它将显示 sm 和 xs 设备。

<div class="container">
    <ul class="nav nav-pills">
        <li class="hidden-xs hidden-sm"><a href="#">Home</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Help</a></li>
        <li class="hidden-xs hidden-sm"><a href="#">Blog</a></li>
        <li class="dropdown visible-xs visible-sm">
             <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
             <ul role="menu" class="dropdown-menu">
                <li><a href="#">Link 01</a></li>
                <li><a href="#">Link 02</a></li>
                <li><a href="#">Link 03</a></li>
             </ul>
         </li>
        <li><a href="#"><span class="search"></span></a></li>
        <li><a href="#"><span class="checkout"></span></a></li>
        <li><a href="#"><span class="home"></span></a></li>
    </ul>
</div>