0

如何使 UI 引导现有选项卡标题部分到移动视图中的下拉列表。

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小提琴链接：

UI 选项卡标题 JS Fiddle

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

4

1 回答 1

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

您只需.inmobile向dropdown-toggle锚标记添加一个类，然后使用媒体查询来定位该元素（整个下拉列表将通过切换一个锚标记来隐藏/显示）。

这是小提琴

于 2016-02-18T22:29:09.190 回答