начальной загрузки второй содержание вкладки начинается после того, оставляя место для первой вкладке содержимого DIV

Question

Простые Bootstrap 3 вкладки:

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

Я создаю вкладки с помощью бутстраповских 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