如何在 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 一样。

请参阅此小提琴： https: //jsfiddle.net/truesoft/q1djhp5b/第 1 行只是作为边距的示例，它在下一行之间有一个边距。但是当屏幕为smlabel时，当 Type并进入下一行时没有边距。我尝试为提交按钮留出边距，但如果我放置这些按钮，则在其他情况下将无法正常显示。select

哪种方法是最好的方法？

Answer 1

你几乎明白了。您只需添加正确的 间距实用程序组合即可。

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

注意：我还冒昧地把type上的字段弄大了一点md，因为它看起来有点太挤了，而且我还有地方可以腾出空间。当然，这完全是可选的，如果您将它们恢复回来，它就会起作用。

你的例子缺少的是课程{property}{sides}-{breakpoint}-{size}。