Question

我正在尝试使用Bootstrap 4导航标签导航堆叠，以使所选标签的外观类似于this。

基本上我需要将所选标签的外观放在内容区域的左外侧，该区域是带边框的视图。就像它坚持我的观点类型的东西。这是我目前所拥有的一个示例Plunk，但它不正确，因为标签位于边界视图内：

 <!-- myView is the container for my content-->
 <div id=myView>
 <!-- Nav tabs -->
 <ul class="nav nav-tabs nav-stacked col-md-2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

  <!-- Tab panes -->
  <div class="tab-content col-md-10">
    <div class="tab-pane active" id="home" role="tabpanel">Home content</div>
    <div class="tab-pane" id="profile" role="tabpanel">Profile content</div>
    <div class="tab-pane" id="messages" role="tabpanel">Messages content</div>
    <div class="tab-pane" id="settings" role="tabpanel">Settings Conent</div>
  </div>
</div>

任何帮助将不胜感激，因为这让我感到难过，而且我对这类事情并不十分熟悉。

Bootstrap 4 Left Stacked Tabs

0 个答案: