html - 关于 Bootstrap 的几个问题

Question

这是 this question 的后续行动，在那里我了解了 Bootstrap 以实现 this kind of a thing ，现在我还有几个问题:

1。 here这三行代码到底是做什么的(请参阅帖子底部的行)，为什么没有它们会使选项卡无法正常工作？

2。我尝试使用包含双列格式表的选项卡进行此操作，第二个选项卡出现在选项卡选项下方，就好像第一个选项卡占用空间但不可见一样，所以我不得不添加 style="margin-top: -600px">到第二个标签的代码 <div>然后是 <br>一开始，现在它几乎和另一个标 checkout 现在同一个地方；这是正常的还是听起来很奇怪？底部的代码(没有表格列的内容)，输出未发布，因为还不是时候发布。

Q1 中的代码行:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Q2 的代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane fade in active">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="Cspoiler" class="tab-pane fade" style="margin-top: -600px">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Q2:我去掉了 margin-top:-600px;它似乎工作正常。

<div style="text-align: justify">
  [Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#Vspoiler">Vulgate version</a></li>
  <li><a data-toggle="tab" href="#Cspoiler">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane fade in active">
  <br>
  <table>
<tbody>
  <tr>
    <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 1 of tab 1]
      </div>
    </td>
    <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 2 of tab 1]
      </div>
    </td>
  </tr>
</tbody>
  </table>
</div>
<div id="Cspoiler" class="tab-pane fade">
  <br>
  <table>
    <tbody>
      <tr>
        <td>
          <div class="column" style="padding-left: 80px">
            [Contents of col 1 of tab 2]
          </div>
        </td>
        <td>
      <div class="column" style="padding-left: 80px">
        [Contents of col 2 of tab 2]
      </div>
    </td>
  </tr>
</tbody>

参见 jsfiddle: https://jsfiddle.net/4oje5r8h/

这两个选项卡并排显示，内容包含在各自的选项卡中(我将 [选项卡 2 的第 2 列的内容] 更改为 [选项卡 1 的第 2 列的内容]，希望对您有所帮助!