如何使 UI 将现有选项卡标题部分 Bootstrap 至移动 View 中的下拉菜单。
HTML:
<div>
<div ng-controller="TabsDemoCtrl">
<hr />
<tabset justified="true">
<tab ng-repeat="tab in tabs" heading="{{tab.title}}">
<div class="tab-content">
{{tab.content}}
</div></tab>
</tabset>
<hr />
</div>
CSS:
.tab-content {
text-align: center;
background-color: #eef0f1;
padding-top: 35px;
font-weight: 700;
}
JS fiddle 链接:
当前 UI 选项卡 View 更改为移动 View 中的垂直线(我如何破解当前 UI 选项卡以使其下拉(仅在移动 View 中)
最佳答案
嗯,这很简单。
您只需要在选项卡元素旁边并排显示一个下拉元素,并且根据视口(viewport)大小,您可以在下拉列表的可见性之间切换(在移动设备上可见,否则消失)。
HTML
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle inmobile" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
CSS
.inmobile {
display: none !important;
}
@media only screen and (max-width: 480px) {
.inmobile {
display: block !important;
}
}
您只需添加一个类 say .inmobile
到 dropdown-toggle
anchor 标记,并使用媒体查询来定位该元素(整个下拉列表将隐藏/显示只需切换那个 anchor 标记即可)。
关于html - (移动 View )如何使 UI 选项卡标题作为下拉列表工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35492709/