Bootstrap 5 中的修改行间距

Question

我有以下标记。

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="Truck_Notes">Notes</label>
            <textarea rows="3" class="form-control" id="Truck_Notes" name="Truck.Notes"></textarea>
            <span class="text-danger field-validation-valid" data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-primary">
            <a class="btn btn-secondary" href="/Trucks">Cancel</a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group text-end">
        </div>
    </div>
</div>

在 Bootstrap 4 中看起来不错。但是在 Bootstrap 5 中两行之间没有间距。

Bootstrap 行间距一直很好。 Bootstrap 5 中要在此处留出适当间距的首选方式是什么？

Answer 1

一个解决方案是使用 Bootstrap 中的 my class 作为顶部和底部 margin。在您的示例中，我在您的 textarea 元素上添加了 my-3 for 1rem of top and bottom margin。

B5 上间距不同的原因是 form-group、form-row 和 form-inline classes 已在 Bootstrap 5 中删除：所以 Grid and Utilities 应该改用。 B5 中更新的间距实际上在很多情况下都非常有用。因此，许多用于间距的默认 classes 已被删除。

在此处详细了解 Bootstrap 间距 - Bootstrap 5 Spacing

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="Truck_Notes">Notes</label>
            <textarea rows="3" class="form-control my-3" id="Truck_Notes" name="Truck.Notes"></textarea>
            <span class="text-danger field-validation-valid" data-valmsg-for="Truck.Notes" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-primary">
            <a class="btn btn-secondary" href="/Trucks">Cancel</a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group text-end">
        </div>
    </div>
</div>

Bootstrap 5 中的修改行间距

Modified row spacing in Bootstrap 5

html

css

twitter-bootstrap

bootstrap-5