在 Bootstrap 3 中的两个 div.row 之间添加边距 [重复]

Question

我是 CSS 和引导程序的新手。我正在处理需要添加两行的遗留代码。第一行是一个下拉菜单和一个小帮助按钮。第二行是另一个按钮。

我想使用正确的方式在两行之间留出边距，即使用 CSS 或 Bootstrap 相关类等。我最终在两个 div.row 之间使用了 <p></p>，但不知何故，我认为这不是正确的方式。下面是我的代码 sn-ps 和添加 <p></p> 前后的屏幕截图。请帮忙提出一种不使用<p></p>的方法。

<div class="row">
<div class="col-xs-4">
<select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option value="kitchen">Kitchen</option>
    <option value="test01">test01</option>
    <option value="test02">test02</option>
    <option value="test03">test03</option>
</select>
</div>

<div class="col-xs-4">
<a id="manual_help">
    <i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</div>
    <div class="col-xs-4"></div>
</div>
<!-- This is the part used to create margin -->
<p></p>
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <button id="add_id" class='btn btn-primary'>
            <i class="fa fa-plus-circle"></i> <span class="add_text">
                Add
            </span>
        </button>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <button id="edit_id" class='btn btn-primary'>
            <i class="fa fa-pencil-alt"></i> <span class="edit_text">
                Edit
            </span>
        </button>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <button id="delete_id" class='btn btn-danger' style="display:block">
            <i class="fa fa-trash-alt"></i> <span class="delete_text">
                Cancel
            </span>
        </button>
    </div>
</div>

在添加<p></p>之前：

添加<p></p>后：

Answer 1

只需为 div.row 元素添加边距。这可以像说所有行一样简单 - 使用 .row {margin-bottom: 15px} 获得 15px 的边距底部 - 和（更改所需的边距），或者您可以使用 .row:not(:last-child){margin-bottom: 15px} 来控制容器底部的间距 - 甚至可以它为.row + .row {margin-top: 15px}，它为每个直接同级行提供margin-top，并防止容器底部的间距问题。

作为一般规则 - 尽量不要使用 html 元素来控制间距 - 使用 CSS（我还在该建议中包括 <br/> 和 <hr/> 标记 - 它们可以用 CSS 替换以更好地控制。

我添加了一个具有特定类的父元素，然后使用该类对这些行进行命名空间，以防止您的应用程序中的所有行都受到影响。您可以创建一个实用程序类并为其应用样式 - 以供重复使用 - 例如：“.rows-with-margin”或其他有意义的东西。

请注意，我将 col-xs-12 更改为 col-xs-4 ... 与行间距无关 - 只是为了让它为小 sn-p 窗口正确呈现。

/* alternative 1 - margin bottom on all rows */
.form-select-wrapper .row {
  margin-bottom: 15px
}


/* alternative 2 - margin bottom on all rows within the parent container - except the last one */
.form-select-wrapper.row:not(:last-child){
  margin-bottom: 15px;
}

/* alternative 3 - margin top on direct sibling rows */
.form-select-wrapper .row + .row{
  margin-top: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="form-select-wrapper">
  <div class="row">
    <div class="col-xs-4">
      <select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
          <option value="kitchen">Kitchen</option>
          <option value="test01">test01</option>
          <option value="test02">test02</option>
          <option value="test03">test03</option>
      </select>
    </div>
    <div class="col-xs-4">
      <a id="manual_help">
          <i class="fa fa-question-circle" aria-hidden="true"></i>
      </a>
      </div>
    <div class="col-xs-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <button id="add_id" class='btn btn-primary'>
                <i class="fa fa-plus-circle"></i> <span class="add_text">
                    Add
                </span>
            </button>
        </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <button id="edit_id" class='btn btn-primary'>
              <i class="fa fa-pencil-alt"></i> <span class="edit_text">
                  Edit
              </span>
          </button>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <button id="delete_id" class='btn btn-danger' style="display:block">
              <i class="fa fa-trash-alt"></i> <span class="delete_text">
                  Cancel
              </span>
          </button>
      </div>
  </div>
</div>