响应式引导导航菜单

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>