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

cuxqih21  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(156)

简单的引导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>
hgc7kmma

hgc7kmma1#

您在第行的类别名称中有 * 语法错误 *:

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

要解决问题它应该是:

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

我的天啊

rseugnpd

rseugnpd2#

如果您遇到了同样的问题,但没有打字错误,请尝试将CSS tab-content属性从“display: none“更改为“visibility: hidden

.tab-content > .tab-pane {
  display: block; /* undo "display: none;" */
  visibility: hidden;
}

这为我解决了这个问题。

相关问题