html - Bootstrap 第二个选项卡内容在为第一个选项卡内容 div 留出空间后开始

Question

简单的 Bootstrap 3 标签:

https://jsbin.com/yakuja/edit?html,output

我正在使用 bootstrap 3 创建选项卡。唯一的问题是第二个选项卡的内容在第一个选项卡的顶部添加空格后开始。

在理想情况下，内容上方不应有空格

<div class="col-sm-9">
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li role="presentation" class="active">
            <a href="#uploadFormat" data-toggle="tab">Client Upload Format</a>
        </li>
        <li role="presentation">
            <a href="#upload" data-toggle="tab">Client Bulk Upload</a>
        </li>
    </ul>
    <div class="tab-content">
    <br/>
        <div class="tab pane fade active in" id="uploadFormat">
            <div class="form-bottom">
                <p>saurabh</p>
                <p>saurabh</p>
                <p>saurabh</p>
                <p>saurabh</p>
                <p>saurabh</p>
            </div>
        </div>
        <div class="tab pane fade" id="upload">         
            <form>
            <fieldset>
                <div class="form-group">
                    <label for="client_upload_file">Upload Client File</label>
                    <input type="file" name="client_upload_file" id="client_upload_file"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-sm" type="submit" name="clientUpload">Upload Client File</button>
                </div>
            </fieldset>
            </form>
        </div>
    </div>
</div>

Answer 1

您在以下行的类名中有一个语法错误:

<div class="tab pane fade" id="upload">
//             ^

解决问题应该是:

<div class="tab-pane fade" id="upload">

JsFiddle