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

Question

我不熟悉css和引导。我正在处理一个需要添加两行的遗留代码。第一行是一个下拉列表和一个小的帮助按钮。第二行是另一个按钮。

我希望以适当的方式在两行之间留有边距，即使用CSS或与引导相关的类等。我最终使用了

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

添加

添加




Answer 1

只需在div.row元素中添加边距即可。这可以简单地说，所有行-使用获得15px的底部边距。行{margin bottom:15px}-和（更改所需的边距），也可以执行。row:not（：last child）{margin bottom:15px}来控制容器底部的间距，甚至可以按的方式执行。一行行{margin top:15px}为每个直接同级行提供margin top，并防止容器底部的间距问题。

一般来说，不要使用html元素来控制间距，而是使用CSS（我还包括

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

请注意，我将col-xs-12更改为col-xs-4。。。与行间距无关-只是为了正确地为小片段窗口渲染行间距。

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