Question

根据this StackOverflow问题中的第一个答案，我有一个使用Bootstrap的HTML页面和左侧的nav-tabs。我的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>

Answer 1

只需在.table类中添加display：block，默认显示为display：table

.table{
  display:block;
}

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

Bootstrap Left Nav选项卡和内容

1 个答案: