Question

CODE

<!-- 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>

RESULT

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

我的猜测是你缺少bootstrap CSS。或者你错过了这里的任何细节？

这是一个包含css后的代码段正常工作：

var data = JSON.Stringify(result); 
var obj1 = data[0].obj1 && var obj2 = data[0].obj2

Answer 2

<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="nav-item">
     <a class="nav-link active" aria-controls="personal" data-toggle="tab" role="tab" href="#personal">Personal </a>
  </li>
  <li role="presentation" class="nav-item">
     <a class="nav-link" aria-controls="official" data-toggle="tab" role="tab" href="#official"> Official</a>
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="personal">
     <div class="form-group">
        <div class="col-xs-6">
           <label for="first_name" style="font-weight:bold">First name</label>
           <input type="text" class="form-control" name="first_name" id="first_name" readonly value="Siya">
        </div>
     </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="official">
     <div class="form-group">
        <div class="col-xs-6">
           <label for="isavailable" style="font-weight:bold">Is Available</label>
           <input type="text" class="form-control" name="isavailable" id="isavailable" readonly value="isavailable">
        </div>
     </div>
  </div>

Bootstrap - 模式中的标签不起作用

2 个答案: