У меня есть следующая разметка.
<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 иметь здесь соответствующий интервал?
Одним из решений может быть использование класса my
из Bootstrap для верхнего и нижнего margin
. В вашем примере я добавил my-3
для 1rem
сверху и снизу margin
к вашему элементу textarea
.
Причина, по которой интервал в B5 отличается, заключается в том, что классы form-group
, form-row
и form-inline
были удалены в Bootstrap 5: поэтому вместо них предполагается использовать Сетка и Утилиты. Обновленный интервал в B5 действительно полезен во многих случаях. Из-за этого многие классы по умолчанию, используемые для интервалов, были удалены.
Подробнее о Bootstrap Spacing читайте здесь — 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>
@JonathanWood Причина, по которой интервал в B5 отличается, заключается в том, что классы form-group
, form-row
и form-inline
были удалены в Bootstrap 5: поэтому вместо них предполагается использовать Сетка и Утилиты. Обновленный интервал в B5 действительно полезен во многих случаях. Из-за этого многие классы по умолчанию, используемые для интервалов, были удалены.
Спасибо, но вы говорите, что с Bootstrap 5 мне нужно вручную добавлять поля практически к каждой строке? Если это улучшение, то я явно что-то упускаю.