This is the follow-up to this question, where I learned about Bootstrap to achieve this kind of a thing, and now I have a couple questions left:
1. What exactly do the three lines of code here (see bottom of post for the lines) do, and why does not having any of them make the tabs not work properly?
2. I tried this with tabs containing tables for two-column formating, and the second tab appeared way below the tab choices, as if the first tab was left occupying space but invisible, so I had to add style="margin-top: -600px">
to the code for the second tab's <div>
and then a <br>
to its start, and now it comes out almost in the same place as the other tab; is this normal or does that sound weird? Code at the bottom (without the contents of the table columns), the output is not published because it is not time to post that yet.
Lines of code from 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>
Code from 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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…