ブートストラップ左のタブとコンテンツ

私はブートストラップを使用してHTMLページを持っています。最初の答えの左側にあるnav-tabsはthis StackOverflowの質問です。私のコード例はhereです。ここでは、2番目のナビゲーションタブの中にテーブルを置こうとしています。しかし、どのようにしてテーブルをタブの右側に直接配置できますか？ブートストラップ左のタブとコンテンツ

私が試した：

<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

だけ表示を追加します。デフォルトでは、あなたの.tableクラスのブロック、それはディスプレイとして、それを表示している：置くテーブル

.table{ 
    display:block; 
}

https://jsfiddle.net/palak6041/xz4mfvgk/2/

出典

2016-08-07 03:33:41 BakerStreet221

テーブルを同じ行に配置することはできますが、テーブルを画面全体の幅にするにはどうすればよいですか？ – mbacvanski

ブートストラップ左のタブとコンテンツ

答えて

関連する問題