html - 如何在 sm 显示器上跨越 2 行的 bootstrap 4 表单行中的字段之间留出边距？

Question

我正在尝试使用一个 bootstrap 4 表单，其中一些字段对于大于 sm 的屏幕应该在一行中，否则将它们放在 2 行中。

我试着用这段代码来做到这一点:

<div class="form-group row">
  <label class="col-sm-2 col-form-label">File:</label>
  <div class="col-sm-10 col-md-6">
    <input class="form-control" type="text" />
  </div>
  <label class="col-sm-2 col-md-2 col-form-label">Type</label>
  <div class="col-sm-4 col-md-2">
    <select class="form-control"><option value=""></option></select>
  </div>
</div>

对于md+，字段将在一行中:2+6+2+2
对于 sm，该行将是 2+10(我们将其命名为 A)，而下一个 - B - 2+4.. .

我的问题是，在新的“行”A 和 B 之间没有边距，就像我们有 2 个带有“行”的 div 一样类。

请参阅此 fiddle :https://jsfiddle.net/truesoft/q1djhp5b/例如，第 1 行的边距，它在下一个之间有一个边距。但是，当屏幕为sm 时，Type label 和select 进入下一行时没有边距。我试图为提交按钮留出空间，但如果我把它们放在那些按钮上，在另一种情况下它就不会正常显示。

哪种方法最好？

Answer 1

你几乎明白了。您只需要添加正确的组合 spacing utilities .

.row {
  background: #f8f9fa;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="form-group row py-sm-3 mb-0">
    <label class="col-sm-2 col-form-label">Row 1:</label>
    <div class="col-sm-10">
      <input class="form-control" type="text">
    </div>
  </div>
  <div class="form-group row pb-3">
    <label class="col-sm-2 col-form-label" for="file">File:</label>
    <div class="col-sm-10 col-md-6">
      <input class="form-control mb-sm-3" id="file" type="text">
    </div>
    <label class="col-sm-2 col-md-1 col-form-label" for="type">Type</label>
    <div class="col-sm-5 col-md-3 mb-3">
      <select class="form-control" id="type">
        <option value=""></option>
        <option value="1">1</option>
        </select>
    </div>
    <div class="offset-sm-1 offset-md-8 col-sm-4">
      <input name="commit" value="Save" class="btn btn-primary btn-block" type="submit">
    </div>
  </div>
</div>

注意:我还冒昧地在 md 上将 type 字段做得大了一点，因为它看起来有点太挤了我有从哪里占用空间。当然，这完全是可选的，如果您将它们还原，它就会起作用。

您的示例缺少的是 {property}{sides}-{breakpoint}-{size} 类。