Question

我正在开发一个应用程序，并且我正在使用Bootstrap v3.3.5。我创建了一个导航，但我希望有两个不同的视图。

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

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

提前致谢..

＆＃13;

<!DOCTYPE HTML>
<html>
<script src="js/bootstrap.js"></script>
<head>
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
</head>


<body>
		<ul class="nav nav-pills nav-stacked" id="pills-first">
			<li><a href="#"><span class="glyphicon glyphicon-glass"></span>  Glas</a></li>

			<li><a href="#" data-target="#submenu1"><span class="glyphicon glyphicon-music"></span> Music</a></li>
			<ul id="submenu1">
				<li><a href="#"><span class="glyphicon glyphicon-volume-off"></span> Volume off</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-volume-down"></span> Volume down</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-volume-up"></span> Volume up</a></li>
			</ul>
       
		
			<li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li>
		</ul>
  </div>
</body>
</html>

＆＃13;

Answer 1

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

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

要更新下拉导航以显示在移动设备的一侧，我使用媒体查询使用此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;
    }
}

它仍然需要一些样式，但您可以在此处查看您要查找的结果的示例： https://jsfiddle.net/partypete25/8Lrr88y5/

Bootstrap：.nav-stacked

1 个答案: