（移动视图）如何使 UI 选项卡标题作为下拉菜单工作

Question

如何使 UI bootstrap 现有选项卡标题部分在移动视图中下拉。

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 Link :

UI Tab Heading JS Fiddle

目前 UI 选项卡视图更改为移动视图中的垂直线（我如何破解当前 UI 选项卡使其下拉（仅在移动视图中）

Answer 1

嗯，这很简单。

您只需要在选项卡元素旁边并排显示一个下拉元素，并且根据视口大小，您可以在下拉菜单的可见性之间切换（在移动设备上可见，否则消失）。

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;
    }
}

您只需将 class say .inmobile 添加到 dropdown-toggle 锚标记，然后使用媒体查询来定位该元素（整个下拉列表将 hide/show通过切换那个锚标签）。

Here is the Fiddle

（移动视图）如何使 UI 选项卡标题作为下拉菜单工作

(Mobile View) How to make UI tabs heading to work as a drop down

html

css

twitter-bootstrap

angular-ui-bootstrap-tab