gpt4 book ai didi

javascript - Bootstrap 中的选项卡 Pane

转载 作者:太空宇宙 更新时间:2023-11-04 11:13:35 24 4
gpt4 key购买 nike

我正在使用 Bootstrap 选项卡,第三个选项卡的内容没有显示在第三个选项卡 Pane 中,而是显示在第一个和第二个 Pane 的内容下方。不知道是我没有正确嵌套我的html,还是我的导航栏有问题。我是 Bootstrap 的新手。感谢您的帮助。

这是 html:

<body role = "document">

<div class="container" >
<div class="row">
<div class="col-md-12">
<h2>Presidential Trivia</h2> </hr>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-controls="home" data-toggle="tab">Quiz 1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="profile" data-toggle="tab">Quiz 2</a></li>
<li role="presentation"><a href="#tab3" aria-controls="quiz3" data-toggle="tab">Quiz 3</a></li>
</ul>
</div>
</div>


<!-- tab sections -->

<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id='main' class="panel panel-info">
<div id='question1' class="panel-body">
</div>
</div>
<div class="progress">
<div id="progressBar1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">

</div>
</div>

<div id='buttons'>
<button id='prev' class='btn'>Back</button>
<button id='next' class='btn pull-right'>Next</button><br><br>
<button id='restart' class='btn'>Start Over?</button>
</div>

</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id='main2' class="panel panel-info">
<div id='question2' class="panel-body">
</div>
</div>
<div class="progress">
<div id="progressBar2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
</div>
</div>
<div id='buttons'>
<button id='prev2' class='btn'>Back</button>
<button id='next2' class='btn pull-right'>Next</button><br><br>
<button id='restart2' class='btn'>Start Over?</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">

<div id='main3' class="panel panel-info">
<div id='question3' class="panel-body">
</div>
</div>
<div class="progress">
<div id="progressBar3" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
</div>
</div>
<div id='buttons'>
<button id='prev3' class='btn'>Back</button>
<button id='next3' class='btn pull-right'>Next</button><br><br>
<button id='restart3' class='btn'>Start Over?</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</div>
</div>


<script src="Assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

这是页面:http://jakeratliff.com/quiz.html

最佳答案

选项卡内容嵌套不正确 - 在选项卡 2 和 3 的第一行之后有一个额外的缩进,并且每个缩进在每个选项卡的末尾关闭,导致 .tab-contents div 被意外关闭。

选项卡 2 的 HTML 应如下所示(注意末尾少了一个 </div>):

<div class="tab-pane" id="tab2">
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div id='main2' class="panel panel-info">
<div id='question2' class="panel-body">
</div>
</div>
<div class="progress">
<div id="progressBar2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
</div>
</div>
<div id='buttons'>
<button id='prev2' class='btn'>Back</button>
<button id='next2' class='btn pull-right'>Next</button><br><br>
<button id='restart2' class='btn'>Start Over?</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>

选项卡 3 同样如此 - 有一个额外的关闭 </div>那不应该在那里。 HTML 应如下所示:

<div class="tab-pane" id="tab3">        
<div class="row" style="height:100px">
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">

<div id='main3' class="panel panel-info">
<div id='question3' class="panel-body">
</div>
</div>
<div class="progress">
<div id="progressBar3" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="min-width:3%; width:0%">
</div>
</div>
<div id='buttons'>
<button id='prev3' class='btn'>Back</button>
<button id='next3' class='btn pull-right'>Next</button><br><br>
<button id='restart3' class='btn'>Start Over?</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>

关于javascript - Bootstrap 中的选项卡 Pane ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33401062/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com