UI Bootstrap 选项卡集显示选项卡的内容答案

【问题标题】：UI Bootstrap tabset show the content right to the tabsUI Bootstrap 选项卡集显示选项卡的内容
【发布时间】：2015-08-12 08:08:54
【问题描述】：

首先：我对引导程序完全陌生。我想使用vertical tabset 来显示选项卡的内容。我的想法草图：

<tabset vertical="true" type="tabs">
<tab heading="Vertical 1">Vertical content 1</tab>
<tab heading="Vertical 2">Vertical content 2</tab>
</tabset>

但不幸的是，我没能解决这个 css 命令。

【问题讨论】：

我为你插入了你的图片。另外，没有必要在问题中表示感谢。

标签： css angularjs twitter-bootstrap user-interface

【解决方案1】：

性感图片：D

<div class="col-xs-3"> <!-- required for floating -->
  <!-- Nav tabs -->
  <ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs -->
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
 <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Tab.</div>
  <div class="tab-pane" id="profile">Profile Tab.</div>
  <div class="tab-pane" id="messages">Messages Tab.</div>
  <div class="tab-pane" id="settings">Settings Tab.</div>
</div>
</div>

http://dbtek.github.io/bootstrap-vertical-tabs/learn.html

【讨论】：

【解决方案2】：

1.从链接下载css：http://dbtek.github.io/bootstrap-vertical-tabs/ 2.将其添加到您的页面和设计页面如下：

<div class="col-md-12">
<div class="col-md-3"> <!-- required for floating -->
  <!-- Nav tabs -->
  <ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs -->
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>
<div class="col-md-9">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home Tab.</div>
      <div class="tab-pane" id="profile">Profile Tab.</div>
      <div class="tab-pane" id="messages">Messages Tab.</div>
      <div class="tab-pane" id="settings">Settings Tab.</div>
    </div>
</div>
</div>

【讨论】：