Как правильно разместить div в строке в контейнере начальной загрузки при сохранении адаптивного веб-дизайна?

Question

Я пытаюсь выровнять содержимое с существующим контейнером выше, однако я не могу успешно зафиксировать это, так как контейнер расположен в строке, потому что я хотел, чтобы файл находился в каталоге div слева, который толкает контейнер справа откурс.

Назначение позиции: исправлено;к каталогу файловых файлов div решит проблему, однако он не будет поддерживать адаптивный веб-дизайн, который Bootstrap предлагает в своей превосходной системе.

Как вы можетеувидеть содержание не в нужном месте.

Я перепробовал множество вещей в css, однако ни один из них не чувствовался правильным.Сейчас я попробовал поиграть с системой col в Bootstrap, чтобы получить сносный результат.Кроме того, изображение, которое я предоставил на веб-сайте, на самом деле является результатом этого фрагмента кода на тот случай, если возникает вопрос, соответствует ли изображение коду.

<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
    <div class="row justify-content-between">
        <div class="file-list col-lg-2">
            <h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
            <div class="file-list ml-5">
                <p>List</p>
            </div>
        </div>
        <div class="content col-lg-9">
            content
        </div>
    </div>
</div>

Answer 1

Это может быть связано с тем, что вы используете контейнер для заголовка, который основан на фиксированном значении экрана, и контейнер для жидкости, который имеет полную ширину на экране.

Вы можете изменить заголовокКонтейнер для чего-то вроде этого, чтобы выровнять его с вашим столбцом контента?(Предполагается, что вы используете Bootstrap 4)

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-9 offset-lg-9">
            <h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
        </div>
    </div>
</div>

Answer 2

<div class="file-list col-lg-2">

изменить на

<div class="file-list col-lg-3">

вашему столбцу нужно еще 1 столбец, так как это столбец с 12 сетками. сопоставляя его с правым столбцом

<div class="content col-lg-9">