Question

Simple 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

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

1 个答案: