bootstrap模态体和模态页脚覆盖相同的区域

Question

我试图理解为什么我的模态页脚在模态体开始的同一个地方开始。

如何在模态体结束后启动它。

基本上我试图理解为什么页脚中的子句，保存和取消不像模态身体那样排列

  <div class="modal fade " id="CustomizeModal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-md" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <label class="modal-title" id="myModalLabel2">CUSTOMIZE ATTRIBUTES TO DISPLAY</label>
                  </div>
                  <div class="modal-body col-xs-12">
                      <div class="row">
                          <form role="form" >

                              <div style="margin-left: 10px; margin-right: 10px">
                                  <table class="table table-striped">
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Search Attributes </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event IDs </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Occurrence Location & File Source </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Catagory </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Type and Aggregation </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> DSMT Information </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Create By, Updated By and Event Description </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Data Quality Issues and Severity </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Channel </td>
                                  </tr>
                              </table>
                              </div>
                          </form>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <div class="col-xs-12" >
                          <div class="row">
                              <div class="col-sm-4 pull-right">
                                  <button class="btn btn-default btn-sm btn-block ebtn" data-dismiss="modal">Cancel</button>
                              </div>
                              <div class="col-sm-4 pull-right">
                                  <button class="btn btn-block btn-sm btn-default ebtn" ng-click="submit()">Save</button>
                              </div>
                          </div>
                      </div>

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

Answer 1

如果您只是想直接向上和向下显示模态中的所有内容，则无需添加行/列。

尝试使用：

<div class="modal fade " id="CustomizeModal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-md" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <label class="modal-title" id="myModalLabel2">CUSTOMIZE ATTRIBUTES TO DISPLAY</label>
                  </div>
                  <div class="modal-body">
                          <form role="form" >

                              <div style="margin-left: 10px; margin-right: 10px">
                                  <table class="table table-striped">
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Search Attributes </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event IDs </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Occurrence Location & File Source </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Catagory </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Type and Aggregation </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> DSMT Information </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Create By, Updated By and Event Description </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Data Quality Issues and Severity </td>
                                  </tr>
                                  <tr>
                                      <td> <input type="checkbox"> </td>
                                      <td> Event Channel </td>
                                  </tr>
                              </table>
                              </div>
                          </form>
                  </div>
                  <div class="modal-footer">
                              <div class="pull-right">
                                  <button class="btn btn-default btn-sm btn-block ebtn" data-dismiss="modal">Cancel</button>
                              </div>
                              <div class="pull-right">
                                  <button class="btn btn-block btn-sm btn-default ebtn" ng-click="submit()">Save</button>
                              </div>

                  </div>
              </div>
          </div>
      </div>[![enter link description here][1]][1]

Answer 2

这是因为col-xs-12位于模态的主体上，使身体向左浮动。

删除col-xs-12，页脚将显示在您的预期下方。

模态有两个可选大小，可通过修饰符类放在.modal-dialog上。 - modal-lg和modal-sm

大

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

小

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>