1
私はブートストラップを使用して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>
テーブルを同じ行に配置することはできますが、テーブルを画面全体の幅にするにはどうすればよいですか? – mbacvanski