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

Posted 2023-03-06

【中文标题】如何在 sm 显示器上跨越 2 行的 bootstrap 4 表单行中的字段之间设置边距？

【英文标题】：How to make a margin between the fields in a bootstrap 4 form row which spans in 2 rows on sm displays?

【发布时间】：2018-09-24 19:28:54

【问题描述】：

我正在尝试创建一个 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 行，它在下一个之间有边距。但是当屏幕为 sm 时，Type label 和 select 进入下一行时没有边距。我试图为提交按钮留出边距，但如果我把这些按钮放在其他地方，它将无法正常显示。

最好的方法是什么？

【参考方案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 字段稍微大了一点，因为它似乎有点太挤了，我可以从哪里腾出空间。当然，这完全是可选的，如果您将它们还原回来，它将起作用。

您的示例缺少的是 propertysides-breakpoint-size 类。

【讨论】：

正是我需要的！我看到您还为未正确对齐的提交按钮添加了一个 div。