Bootstrap 5 Отступы блоков, как правильно?

Question

[Zukrine]

Здравствуйте! Мне необходимо, чтобы между блоками был достаточно крупный отступ, сейчас сделал таким образом:

@extends('layouts.app')

@section('title')
    Главная страница
@endsection

@section('home')
    <div class="container p-5 mt-5">
        <div class="row col-12">
            <div class="col-lg-8 sm-12 bg-light border rounded">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio quod omnis maxime. Nisi nulla, asperiores
                consequatur dignissimos unde eius eaque laudantium? Odio nulla distinctio officia illo nisi aut magnam
                itaque?
            </div>
            <div class="col-1 p-3"></div>
            <div class="col-lg-3 sm-12 bg-light border rounded">
                @include('includes.sidebar')
                @show
            </div>
        </div>
    </div>
@endsection

Т.е. добавил между ними один блок без информации. Вот так это выглядит:

Демонстрация

Вопрос в следующем, какое-то внутреннее чутье подсказывает, что это неправильно. Так ли это? И если так, то как написать правильно?

Answer 1

[iBird Rose]

в bootstrap 5 есть css переменные для этого

.row {
	--bs-gutter-x: 60px;
}

Comments

[Zukrine]

Но таким образом я задам стиль для всех .row. А если на какой-то из страниц мне не нужно будет так делать?

[iBird Rose]

Zukrine, ну тк сделай обертку повыше, к примеру ".news-section"
а потом задавай переменную через:

.news-section .row {
  --bs-gutter-x: 60px;
}

[Zukrine]

iBird Rose, Ааа, спасибо большщое, понял теперь))

[Zukrine]

iBird Rose, но что-то пошло не так, блоки по прежнему сляпаны друг с другом, а отступы появляются у текста внутри

вот

[iBird Rose]

Zukrine, у бутстрапа отступы делаются через padding. поэтому не задавай стили для .col
внутри .col создавай свои блоки и стилизуй их

[Zukrine]

iBird Rose, прекрасно, обернул вот таким образом и все получилось как хотел, спасибо!

Код

<div class="container p-5 mt-5">
        <div class="row col-12">
            <div class="main_frame col-lg-9 sm-12">
                <div class=" p-3 bg-light border rounded">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio quod omnis maxime. Nisi nulla,
                    asperiores
                    consequatur dignissimos unde eius eaque laudantium? Odio nulla distinctio officia illo nisi aut magnam
                    itaque?
                </div>
            </div>
            <div class="sidebar col-lg-3 sm-12">
                <div class=" p-3 bg-light border rounded">
                    @include('includes.sidebar')
                    @show
                </div>
            </div>
        </div>
    </div>

[Zukrine]

iBird Rose, а можно еще вопрос? Если у меня на одной из страниц в одном блоке много текста и его приходится вертикально прокручивать, то при переключении на эту страницу весь интерфейс чуть смещается влево. Саму верстку это не нарушает, но так ведь не должно быть? Можно как-то зафиксировать, чтобы вне зависимости от длинны текста весь интерфейс оставался на месте?

[iBird Rose]

Zukrine, ну это нормальное поведение скролла браузера.