响应式引导导航菜单

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>

因此，这对于大屏幕而言非常有用。

我想选择前三项，而不是将它们隐藏在小/ xs屏幕上，我希望它们进入下拉菜单。

Answer 1

工作小提琴

我创建了一个下拉菜单，将显示在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>