Измененный интервал между строками в Bootstrap 5

У меня есть следующая разметка.

<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 5

Bootstrap всегда хорошо относился к расстоянию между строками. Каков предпочтительный способ в Bootstrap 5 иметь здесь соответствующий интервал?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Одним из решений может быть использование класса 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>

Спасибо, но вы говорите, что с Bootstrap 5 мне нужно вручную добавлять поля практически к каждой строке? Если это улучшение, то я явно что-то упускаю.

Jonathan Wood 13.05.2022 21:55

@JonathanWood Причина, по которой интервал в B5 отличается, заключается в том, что классы form-group, form-row и form-inline были удалены в Bootstrap 5: поэтому вместо них предполагается использовать Сетка и Утилиты. Обновленный интервал в B5 действительно полезен во многих случаях. Из-за этого многие классы по умолчанию, используемые для интервалов, были удалены.

Kameron 13.05.2022 22:12

Другие вопросы по теме