Rows On Bootstrap modal-body 没有间隙？

Question

在我的 bootstrap 模态中，我有两行，但它们都聚集在一起，行与行之间没有间距。

问题：为什么 bootstrap modal-body 上的行之间没有间隙，最好的解决方案是什么？

HTML

<div class="container">
<hr>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click To Open Modal
</button>
</div>
<!-- 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-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <a href="" id="button-parent" class="btn btn-default">Parent Folder</a> 
    <a href="" id="button-refresh" class="btn btn-default">Refresh Page</a>
    <button type="button" id="button-upload" class="btn btn-primary">Upload</button>
    <button type="button" id="button-folder" class="btn btn-default">Create Folder</button>
    <button type="button" id="button-delete" class="btn btn-danger">Delete</button>
    </div>
    </div>

    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="input-group">
    <input type="text" name="search" value="" placeholder="" class="form-control">
    <span class="input-group-btn">
    <button type="button" data-toggle="tooltip" title="<?php echo $button_search; ?>" id="button-search" class="btn btn-primary"><i class="fa fa-search"></i></button>
    </span>
    </div>
    </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

每当您在 bootstrap 中使用表单元素时，建议您将该特定元素放在表单组中 class - 这样，下面就有一个 15px 的 margin-bottom每个元素。

As per Bootstrap's form example: Wrap labels and controls in .form-group for optimum spacing.

.inline-group {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <hr>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Click To Open Modal
  </button>
</div>
<!-- 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-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group inline-group">
              <a href="" id="button-parent" class="btn btn-default">Parent Folder</a> 
            </div>
            <div class="form-group inline-group">
              <a href="" id="button-refresh" class="btn btn-default">Refresh Page</a>
            </div>
            <div class="form-group inline-group">
              <button type="button" id="button-upload" class="btn btn-primary">Upload</button>
            </div>
            <div class="form-group inline-group">
              <button type="button" id="button-folder" class="btn btn-default">Create Folder</button>
            </div>
            <div class="form-group inline-group">
              <button type="button" id="button-delete" class="btn btn-danger">Delete</button>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="input-group">
              <input type="text" name="search" value="" placeholder="" class="form-control">
              <span class="input-group-btn">
    <button type="button" data-toggle="tooltip" title="<?php echo $button_search; ?>" id="button-search" class="btn btn-primary"><i class="fa fa-search"></i></button>
    </span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

但是，form-group 是一个块属性，所以，它会在新行中删除每个表单元素，所以你可以添加另一个class 喜欢 .inline-group 并制作 display:inline-block 如图所示

Answer 2

这是因为您在模式中使用了 .row。 .row's 没有填充或边距。如果您不想更改标记，那么 "hack" 可以

.modal-body .row {
   padding-bottom: 16px;
}

上面和你的代码在 fiddle -> http://jsfiddle.net/zfLsmogx/

Rows On Bootstrap modal-body 没有间隙？

Rows On Bootstrap modal-body have no gap?

twitter-bootstrap

bootstrap-modal