Javascript 引导：。导航堆叠

我正在开发一个应用程序，我正在使用Bootstrap v3.3.5。我已经创建了一个导航，但我想有两种不同的看法

第一个应该是带有图标和此菜单项名称的平板电脑和计算机。这不应该是下拉菜单

第二个应该是带有图标和右下拉菜单的手机。如何制作这个响应性侧边栏

提前谢谢

---

您可以使用媒体查询和可见/隐藏类的组合来创建所需的结果

我必须创建两个版本的音乐链接，一个用作移动设备的下拉切换，另一个用作平板电脑/桌面的常规链接。我使用hidden xs和visible xs来显示/隐藏定义的移动视图的正确xs

为了更新下拉导航，使其显示在手机的侧面，我使用了媒体查询的css：

@media(max-width:767px) {
    li a[data-target="#submenu1"], #submenu1 {
        float:left;
    }
    #submenu1 {
        padding-left: 0;
        margin-left: -5px;
        list-style: none
    }
    #submenu1>li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px
    }
    .dropdown {
        display:inline-block;
    }
    #submenu1 {
        left:100%;
        top:0;
        width:250px;
        border:0;
        box-shadow:none;
        margin:0;
    }
}

因此，对于平板电脑/桌面电脑，音乐下拉列表始终可见。我使用了以下css：

@media(min-width:7678px) {
    .dropdown-menu {
        position:relative;
        display:block;
        float:none;
    }
}

它仍然需要一些样式，但您可以在此处看到所需结果的示例：

---

“dropdown-menu-right”不会在按钮/项目的右侧显示下拉菜单。它们仍然显示在下面，但它们是右对齐的。