Question

我正在使用Bootstrap选项卡，第三个选项卡的内容未显示在第三个选项卡窗格中，而是显示在第一个和第二个窗格的内容下。我不知道我是否没有正确嵌套我的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

Answer 1

选项卡内容未正确嵌套 - 在选项卡2和3的第一行之后有一个额外的缩进，并且每个缩进在每个选项卡的末尾都关闭，导致if (s.contains( getWood )) { System.out.println("You have gathered " + randomNumber + " wood!"); wood = wood + randomNumber; } else { } } div为意外关闭。

对于标签2，HTML应该看起来像这样（在结尾处注意少一个.tab-contents）：

</div>

同样对于标签3 - 还有一个不应该存在的额外结束<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>。 HTML应该如下所示：

</div>

Bootstrap中的选项卡窗格

1 个答案: