断开时Bootstrap 4列垂直填充

Question

我有一个我为大小显示器定制的表单组。标记如下：

<div class="form-group row">
            @Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { @class = "col-lg-3 col-sm-3 col-form-label" })
            <div class="col-lg-4 col-sm-9">
                @Html.EditorFor(model => model.ValidFrom, new { htmlAttributes = new { @class = "form-control", type = "date" } })
            </div>
            @Html.LabelFor(model => model.ValidTo, "to", htmlAttributes: new { @class = "col-lg-1 col-sm-3 col-form-label" })
            <div class="col-lg-4 col-sm-9">
                @Html.EditorFor(model => model.ValidTo, new { htmlAttributes = new { @class = "form-control", type = "date" } })
            </div>
        </div>

效果非常好，当显示器很宽时，它显示一行上的所有内容组成12列，而当它显示为较小时，它会将其分成两行。

但是，这两行紧密排列在一起，并且其他表格组没有很好的间距。

我缺少任何css课程？

- 编辑 -

HTML：

<div class="form-group row">
            <label class="col-lg-3 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom">Valid from</label>
            <div class="col-lg-4 col-9">
                <input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidFrom must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidFrom" type="date" value="">
            </div>
            <label class="col-lg-1 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo">to</label>
            <div class="col-lg-4 col-9">
                <input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidTo must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidTo" type="date" value="">
            </div>
        </div>

Answer 1

您可以使用边距和填充类。

.my-2.my-sm-0 // would add a vertical margin on xs devices