Bootstrap - Вкладки в модальный не работают

Question

КОД

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-md-8 m"><img src="http://www.goldmedalmind.net/wp-content/uploads/2014/04/anns-face-round.png"></div> 
       <div class="col-md-8 purplebg m"> 

        <div> 

         <!-- Nav tabs --> 
         <ul class="nav nav-tabs" role="tablist"> 
         <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
         <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
         <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
         <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
         </ul> 

         <!-- Tab panes --> 
         <div class="tab-content"> 
         <div role="tabpanel" class="tab-pane active" id="home">...</div> 
         <div role="tabpanel" class="tab-pane" id="profile">...</div> 
         <div role="tabpanel" class="tab-pane" id="messages">...</div> 
         <div role="tabpanel" class="tab-pane" id="settings">...</div> 
         </div> 

        </div> 

       </div> 
      </div> 

     </div> 
    </div> 
    </div> 
</div> 

РЕЗУЛЬТАТ

файлы JS являются:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

**** ОБНОВЛЕНИЕ ****

Это работает, когда я использую https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css вместо того, что получил через http://getbootstrap.com/customize, но все, что я сделал, это изменить количество столбцов и отступов.

Answer 1

Мое предположение: вам не хватает CSS-бутстрапа. Или вы не нашли здесь информации?

Вот фрагмент кода работает отлично после включения в CSS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!-- Modal --> 
 
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-md-8 m"> 
 
      <img src="http://www.goldmedalmind.net/wp-content/uploads/2014/04/anns-face-round.png"> 
 
      </div> 
 
      <div class="col-md-8 purplebg m"> 
 

 
      <div> 
 

 
       <!-- Nav tabs --> 
 
       <ul class="nav nav-tabs" role="tablist"> 
 
       <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> 
 
       </li> 
 
       <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> 
 
       </li> 
 
       <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> 
 
       </li> 
 
       <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> 
 
       </li> 
 
       </ul> 
 

 
       <!-- Tab panes --> 
 
       <div class="tab-content"> 
 
       <div role="tabpanel" class="tab-pane active" id="home">Home</div> 
 
       <div role="tabpanel" class="tab-pane" id="profile">Profile</div> 
 
       <div role="tabpanel" class="tab-pane" id="messages">Message</div> 
 
       <div role="tabpanel" class="tab-pane" id="settings">Settings</div> 
 
       </div> 
 

 
      </div> 
 

 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>