Bootstrap Table with Button to Modal

Question

我有一个引导表和表中的两个按钮。按钮将打开单独的模式。问题是表格的布局，当我使按钮打开模式时，列会错位。

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

 
<table class="table table-condensed"> 
 
    <thead> 
 
    <tr> 
 
     <th>EX 1</th> 
 
     <th>EX 2</th> 
 
     <th>EX 3</th> 
 
     <th>EX 4</th> 
 
     <th>EX 5</th> 
 
     <th>EX 6</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Dummy Text</td> 
 
     <td>Dummy Text 2</td> 
 
     <td>Dummy Text 3</td> 
 
     <td> 
 
     <div class="container"> 
 
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal 1</button> 
 

 
      <!-- Modal --> 
 
      <div class="modal fade" id="myModal" role="dialog"> 
 
      <div class="modal-dialog"> 
 

 
       <!-- Modal content--> 
 
       <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
        <h4 class="modal-title">Modal Title Example</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p>Testing 1 </p> 
 
        <p>Testing 2 </p> 
 
        <p>Testing 3 </p> 
 

 

 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="container"> 
 
      <!--<h2>Modal Example</h2>--> 
 
      <!-- Trigger the modal with a button --> 
 
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalTwo">Modal 2</button> 
 

 
      <!-- Modal --> 
 
      <div class="modal fade" id="myModalTwo" role="dialog"> 
 
      <div class="modal-dialog"> 
 

 
       <!-- Modal content--> 
 
       <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
        <h4 class="modal-title">Modal Title 2</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p>Testing 4 </p> 
 
        <p>Testing 4 </p> 
 

 

 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </td> 
 

 
    </tr> 
 
</table>

Answer 1

默认<div>是块元素（display: block）和所有你需要的是刚刚的按钮。

将modal代码移出表格将解决您的问题。

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

 
<table class="table table-condensed"> 
 
    <thead> 
 
    <tr> 
 
     <th>EX 1</th> 
 
     <th>EX 2</th> 
 
     <th>EX 3</th> 
 
     <th>EX 4</th> 
 
     <th>EX 5</th> 
 
     <th>EX 6</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Dummy Text</td> 
 
     <td>Dummy Text 2</td> 
 
     <td>Dummy Text 3</td> 
 
     <td> 
 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal 1</button> 
 
     </td> 
 
     <td> 
 
     <!--<h2>Modal Example</h2>--> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalTwo">Modal 2</button> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Title Example</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Testing 1 </p> 
 
     <p>Testing 2 </p> 
 
     <p>Testing 3 </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModalTwo" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Title 2</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Testing 4 </p> 
 
     <p>Testing 4 </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>