Как отобразить содержимое div в следующей строке вместо встроенного в сворачиваемом

#html #css #twitter-bootstrap #bootstrap-5

Вопрос:

Я внедряю боковую панель с загрузкой 5.

Я хотел бы получить что-то вроде этого, если щелкнуть инициалы пользователя (свернуть):

Но вместо этого я получаю это:

Я думаю, что это связано с d-flex , нашел несколько вопросов по SO, но ни один из них не решил мою проблему.

Как я могу «разделить» содержимое на два блока и добавить между ними разделительную линию вместо создания двух столбцов?

ЖИВАЯ ДЕМОНСТРАЦИЯ JS FIDDLE

Соответствующий код части:

 <ul class="list-unstyled components">
                <li class="nav-item">
                    <a class="btn btn-primary d-flex" data-toggle="collapse" href="#sidebarUserProfile" role="button" aria-expanded="false" aria-controls="sidebarUserProfile">
                        <div class="row">
                            <span class="userInitials">JW</span>
                            <div class="d-flex text flex-row align-items-center staff-nav-holder">
                                <div class="d-flex flex-column">
                                    <span class="staff-name fw-bold">John Walker</span>
                                    <span class="staff-position">PM</span>
                                </div>
                                <i id="profile-chevron-down" class="bi bi-chevron-down ml-2">
                                </i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="collapse d-block" id="sidebarUserProfile">
                            <ul class="list-unstyled components">
                                <li>Customize your homepage</li>
                                <li>Change your password</li>
                                <li>Log out</li>
                            </ul>
                            </div>
                        </div>
                    </a>
                    </p>
                </li>
            ...
           </ul>

1. можете ли вы добавить минимальный пример кода только для соответствующей части? Если вы используете строки / столбцы, это должно быть легко

2. У вас есть строка без столбцов в ней, строка имеет гибкое отображение. Интересно, почему вы не помещаете части в столбцы начальной загрузки. Когда вы используете строку начальной загрузки, в ней должен быть хотя бы один столбец начальной загрузки.

3. Спасибо за ваш комментарий, к сожалению, добавление столбцов в оба divs ничего не меняет

4. Я на самом деле имел в виду, что вы должны создавать макет с помощью классов col вместо d-flex. это намного проще.

Ответ №1:

Это происходит потому, что вы используете класс «d-block» в свернутом элементе. у свернутого элемента не может быть класса ‘d-block’, потому что это означает: 'display: block;' что это противоречит правилу:

 .collapse:not(.show) {
    display: none;
}

посмотрите на это перо:
https://codepen.io/witty_code/pen/zYdwbZW

1. Спасибо за ваш ответ, в предоставленной вами ручке у меня все еще есть две колонки, как добавить «линию разрыва» между ними?

2. Я отредактировал свою ручку, чтобы ответить на этот вопрос, я просто добавил класс: flex-column . Другое решение, которое я применил с помощью этого другого пера , состоит в том, чтобы заменить d-flex класс row классом (автоматически определяемым в bootstrap как: display: flex; ), а для элементов внутри него я дал col-12 класс вместо row .

3. Спасибо за ответ, я немного обновил свою скрипку. Не могли бы вы отредактировать перо, чтобы оно соответствовало новому содержимому скрипки? Тогда я отмечу ваш ответ как правильный 🙂

4. Ваш файл большой. можете ли вы кратко сказать, что вы изменили?