html - (移动 View )如何使 UI 选项卡标题作为下拉列表工作

Question

如何使 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 Tab Heading JS Fiddle

当前 UI 选项卡 View 更改为移动 View 中的垂直线(我如何破解当前 UI 选项卡以使其下拉(仅在移动 View 中)

Answer 1

嗯，这很简单。

您只需要在选项卡元素旁边并排显示一个下拉元素，并且根据视口(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 标记即可)。

Here is the Fiddle