Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
650 views
Welcome To Ask or Share your Answers For Others

1 Answer

Q2: I removed margin-top:-600px; and it seems to be working fine.

<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>

See jsfiddle: https://jsfiddle.net/4oje5r8h/

The two tabs appear side-by-side, and the content is contained within each respective tab (I changed [Contents of col 2 of tab 2] to [Contents of col 2 of tab 1], I hope that helps!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...