1. 首頁
  2. 問答
  3. 引導左導航選項卡和內容

引導左導航選項卡和內容

2016-08-07 41 views
1

我有一個HTML頁面使用Bootstrap和左邊的導航標籤根據this StackOverflow問題中的第一個答案。我的codepen示例是here，我嘗試在第二個導航選項卡中有一個表格。但是，如何讓表格直接位於選項卡的右側，而不是全部位於下方？引導左導航選項卡和內容

我已經試過：默認情況下它顯示它作爲顯示塊在你的。表類：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> 

</script> 

<body> 
    <h3>Tabs left</h3> 

    <!-- tabs left --> 
    <div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
     <li><a href="#a" data-toggle="tab">One</a></li> 
     <li class="active"><a href="#b" data-toggle="tab">Two</a></li> 
     <li><a href="#c" data-toggle="tab">Twee</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
     <table class="table"> 
      <tr> 
      <th> H1 </th> 
      <th> H2 </th> 
      <th> H3 </th> 
      </tr> 

      <tr> 
      <td> 
       ABC 
      </td> 
      <td> 
       XYZ 
      </td> 
      <td> 
       123 
      </td> 
      </tr> 
      <tr> 
      <td> 
       One 
      </td> 
      <td> 
       Two 
      </td> 
      <td> 
       Twee 
      </td> 
      </tr> 
     </table> 
     </div> 
     <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis.</div> 
     <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    </div> 
    </div> 
</div> 


</div> 
</body>

來源

2016-08-07 mbacvanski

回答

相關問題

 相關問題