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>

响应式Bootstrap导航菜单

1 个答案: