按钮到模态的Bootstrap表

Question

我有一个引导表，表中有两个按钮。按钮将打开单独的模态。问题是当我按下按钮打开模态时，表格的布局和列放错了。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>