Bootstrap: как растянуть блоки с кнопками по краям modal окна?

Question

[Степан]

У меня есть модальное окно, которое разворачивается на весь экран:

вот

<div class="modal fade" id="bookReadModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="currentBookTitle"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body display-3 modal-dialog-scrollable">
                        <p id="pageContent"></p>
                    </div>

                    <div class="modal-footer justify-content-start">
                        <div class="container">
                            <div class="row">
                                <div id="navDiv" class="col">
                                    <button type="button" id="previousPageButton" name="previousPageButton" class="btn btn-outline-primary" onclick="loadPreviousPage()">Предыдущая</button>
                                    <button type="button" id="nextPageButton" name="nextPageButton" class="btn btn-outline-primary" onclick="loadNextPage()">Следующая</button>
                                    <p id="pagePages"></p>
                                </div>
                                <div id="bookmarkDiv" class="col">
                                    <button type="button" id="bookmarkButton" name="bookmarkButton" class="btn btn-outline-primary"><i class="bi bi-bookmark"></i></button>
                                    <button type="button" id="bookmarkButton2" name="bookmarkButton" class="btn btn-primary"><i class="bi bi-bookmark-check-fill"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Нужно, чтобы элемент navDiv выравнивался по левому краю (все элементы внутри него шли в одну строку без переносов), а элемент bookmarkDiv — по правому.
Видел примеры, где две кнопки растягиваются по краям... но с блоками [кнопок] почему-то так не сработало...
Пробовал по-разному. Итог: либо всё съезжает в кучу, либо занимает половину ширины modal-footer'а, но по краям не растягивается.
Сейчас выглядит так:

Надо как-то так:

Answer 1

[Pavel-ww]

Нативным флексом или или бутстраповскими флекс классами выровняйте все. В чем проблема?
На нативном флексе будет примерно так ( в вашем коде не все элементы есть, как на скриншоте)

#navDiv,
#bookmarkDiv {
	display: flex;
	align-items: flex-start;
}
#navDiv {
	justify-content: flex-start;
}
#bookmarkDiv {
	justify-content: flex-end;
}

Comments

[Степан]

CSS мне не нужен, нужно сделать бутстраповскими классами.
Добавил — не помогло.

<div class="modal fade" id="bookReadModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="currentBookTitle"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body display-3 modal-dialog-scrollable">
                        <p id="pageContent"></p>
                    </div>

                    <div class="modal-footer justify-content-start">
                        <div class="container">
                            <div class="row no-gutters">
                                <div id="navDiv" class="col-6 border-1 align-items-start">
                                    <button type="button" id="previousPageButton" name="previousPageButton" class="btn btn-outline-primary" onclick="loadPreviousPage()">Предыдущая</button>
                                    <button type="button" id="nextPageButton" name="nextPageButton" class="btn btn-outline-primary" onclick="loadNextPage()">Следующая</button>
                                    <p id="pageOfPages"></p>
                                </div>
                                <div id="bookmarkDiv" class="col-6 border-1 float-end float-start align-items-end">
                                    <button type="button" id="bookmarkButton" name="bookmarkButton" class="btn btn-outline-primary" data-action="add" onclick="addRemoveBookmark()"><i id="bookmarkIcon" class="bi bi-bookmark"></i></button>
                                    <select class="form-select" id="bookmarkList" name="bookmarkList">
                                        <option value="1">Страница 1</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

[Pavel-ww]

Степан, ну вы не правильные классы добавили. Вам надо сделать обе колонки flex контейнерами и flex свойствами выровнять содержимое как вам надо. Ни одна из этих колонок в вашем коде не содержит класс d-flex. И причем здесь float-end float-start?

Вам нужно две вещи для успеха - понимать как работает flex и прочитать документацию бутстрап, что бы определить какие flex классы надо использовать. В целом очень простая вещь, которая даже не требует того что бы задавать вопрос здесь.

Но если вам трудно с этим справиться, то просто наймите фрилансера.

[Степан]

И причем здесь float-end float-start?

Не заметил, что вмето flex-start/flex-end вставилось float-start/float-end, так как flex-start и flex-end среди доступных классов я не вижу.

Код поправил

<div class="modal fade" id="bookReadModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="currentBookTitle"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body display-3 modal-dialog-scrollable">
                        <p id="pageContent"></p>
                    </div>

                    <div class="modal-footer justify-content-start">
                        <div class="container">
                            <div class="row d-flex flex-row">
                                <div id="navDiv" class="col-6 d-flex flex-row align-items-start justify-content-start">
                                    <button type="button" id="previousPageButton" name="previousPageButton" class="btn btn-outline-primary mx-1" onclick="loadPreviousPage()">Предыдущая</button>
                                    <button type="button" id="nextPageButton" name="nextPageButton" class="btn btn-outline-primary mx-1" onclick="loadNextPage()">Следующая</button>
                                    <p id="pageOfPages" class="mx-1"></p>
                                </div>
                                <div id="bookmarkDiv" class="col-6 d-flex flex-row align-items-end justify-content-end">
                                    <button type="button" id="bookmarkButton" name="bookmarkButton" class="btn btn-outline-primary mx-1" data-action="add" onclick="addRemoveBookmark()"><i id="bookmarkIcon" class="bi bi-bookmark"></i></button>
                                    <select class="form-select mx-1" id="bookmarkList" name="bookmarkList">
                                        <option value="1">Страница 1</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

но почему-то оба блока по-прежнему располагаются в левой половине нижней части окна (правый блок не притягивается с правому краю):

[Pavel-ww]

Степан, теперь все нормально с колонками. Выравнивание работает как вы хотели. flex-row - лишний. По умолчанию во flex контейнере направление итак row.

Увидеть всё нормально не дает .container (слишком узкий и не отцентрован) и select который растягивается автоматом на максимальную ширину.

То есть для центровки контейнера нужно задать ему левый и правый марджин auto или растянуть его на всю ширину - ищите соответствующие классы. Для селект задать максимальную ширину - ищите соответствующие классы. Я не знаю их наизусть.

Пользуйтесь инспектором кода браузера - но покажет все. Определяйте все что нужно сделать через нативный css, а потом смотрите соответствующие классы в документации bootstrap

[Степан]

Pavel-ww, да, разобрался. Уменьшил ширину селекта — увидел, всё содержимое блока выравнивается по правому краю. Спасибо.