我有以下標記。
<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 中在這里有適當間距的首選方式是什么？
uj5u.com熱心網友回復：
一種解決方案是使用myBootstrap 中的類作為 top 和 bottom margin。在您的示例中，我在您的元素上添加my-3了 for1rem頂部和底部。margintextarea
B5 上的間距不同的原因是因為form-group,form-row和form-inline類已在 Bootstrap 5 中洗掉：因此應該使用Grid和Utilities 。B5 中更新的間距實際上在許多情況下都非常有用。因此，洗掉了許多用于間距的默認類。
在此處閱讀有關 Bootstrap 間距的更多資訊 - Bootstrap 5 間距
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/477018.html
上一篇：串列編號不垂直與內容對齊