Как отменить flex для одного элемента?

Question

[gh0sty]

В общем, мне надо выполнить меню с flex отображением, в версии <768px должно появляться выпадающее меню от Bootstrap (не dropdown, но тут применимо, просто navbar), но оно наследует flex и выпадает не снизу, а сбоку справа. У меня сложная верстка и я как-то сделал через редактор в хроме такие стили, чтобы все эти условия выполнялись и я случайно обновил страницу)


Мой pen

Мой текущий код с Bootstrap:

<div class="col-12 justify-content-between align-items-center d-flex ...">
    <a class="d-inline-flex ...">
        ...
    </a>
    <div class="ml-2 mr-auto d-inline-flex ...">
        ...
    </div>
    <button class="navbar-toggler ml-auto d-block d-md-none ...">
        ...
    </button>
    <div class="navbar-items"> <!-- пустой класс -->
        <div class="collapse navbar-collapse">
            <div class="d-none d-md-flex align-items-center">
                ...
            </div>
            <ul class="d-flex d-md-none navbar-nav ..."> <!-- Тот самый злополучный dropdown -->
                ...
            </ul>
        </div>
    </div>
</div>

В большой версии - все выглядит отлично. До открытого меню в маленькой - тоже все ок. Открываю, а список выпадает вправо. Я помню, что шаманил с display block, и удачно, пока не обновил. Из-за этого в своих стайлсах, после bootstrap-а прописал:

.navbar-collapse {
    display: block;
}

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

Но что-то где-то потерял, и все перестало работать.

Я уверен, это фиксится просто, но я чето уже долго туплю)))

Comments

[Natalia ivanova]

Оформите код в codeopen или в подобном, чтобы Вам можно было помочь.

[gh0sty]

Natalia ivanova, ok. Сейчас

[gh0sty]

Natalia ivanova, указал в вопросе

[Natalia ivanova]

"Открываю, а список выпадает вправо" - с тем кодом, что у Вас сейчас, не нашла такого поведения. Всё (при всех ширинах экрана) - сверху вниз.
Уточните, пожалуйста, при каких условиях работает не так, как хочется.

[gh0sty]

Natalia ivanova, ну в pen-е я только мобильную версию и оставил)) Лол, у меня это выглядит вот так при toggle

Это chrome. Я так понимаю, он считает этот block flex-элементом, но там четко прописано display block

[Ankhena]

gh0sty, Выглядит именно так, но выпадает сверху вниз.
Как должно выглядеть-то?

[gh0sty]

Ankhena, должно выпадать сверху вниз. Я обновил firefox и chrome - все так же вбок. Через инкогнито (без кеша и кукисов) - не меняется.

[gh0sty]

Ankhena, в чем рофл?)))

[Natalia ivanova]

Если я правильно Вас поняла, то этого добиваетесь?
https://codepen.io/Natalia_ai_ivanova/pen/jOErRvJ

[gh0sty]

Natalia ivanova, окей, тут выпадает вниз, но как сделать, чтоб первая строка была растянута. Типо имела justify-content-between. А меню выпадало вниз.
Типо вот этого:

Ваш pen отображает вот так (и пустое место справа):

[Natalia ivanova]

В десктопе такой же вид нужен?

[Ankhena]

gh0sty, я так и не увидела, куда оно по-вашему, должно выпадать.

[gh0sty]

Natalia ivanova, в десктопе другой вид, потому и применяется justify-content-between. Но тип это разницы не имеет, тут нет media стилей.

[gh0sty]

Ankhena, вот так

[Ankhena]

Natalia ivanova, круто, как вы догадались, что это называется сверху вниз, а то было слева направо ))))

[gh0sty]

Ankhena, сложна)))

[gh0sty]

Natalia ivanova, в общем у меня ваш вариант игнорит justify-content: space-between !important; Хоть и не вычеркивает его.

[Natalia ivanova]

Если не трогать justify-content-between, то прийти к желаемому можно так
https://codepen.io/Natalia_ai_ivanova/pen/jOErRvJ
Список допилите сами?

[gh0sty]

Natalia ivanova, думаю да. А что вы поправляли конкретно? (Запишите в ответ)

[Natalia ivanova]

Вынесла

<div class="navbar-items collapse ">
            и всё, что внутри
        </div>

из блока с flex.

[gh0sty]

Natalia ivanova, ok. Щас попробую так.

[gh0sty]

Natalia ivanova, Не, так не катит))) В большой версии блок должен оставаться в общем flex-е. Есть вариант просто изменить ему display так, чтоб он перестал существовать как flex только в мобилках? Вот пример: > тыц <

[gh0sty]

Natalia ivanova, вот вариант 1 в 1

[Natalia ivanova]

https://codepen.io/Natalia_ai_ivanova/pen/jOErRvJ
Тогда через grid.

Answer 1

[Natalia ivanova]

https://codepen.io/Natalia_ai_ivanova/pen/jOErRvJ

Answer 2

[gh0sty]

Окей это было адски. Я просто положил болт, так как такое меню возможно только вне flex и вынес блок.
Так выглядит код:

<div class="col-12 col-md-10 offset-md-1 d-flex justify-content-between align-items-center">
    <a href="/" class="text-decoration-none">
       ...
    </a>
    <div class="btn-group dropdown ml-2 mr-auto d-inline-flex">
        ...
    </div>
    <!-- Переключатель -->
    <button class="navbar-toggler ml-auto d-block d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Для десктопов -->
    <div class="d-none d-md-inline-flex align-items-center">
       ...
    </div>
</div>
<!-- Для мобилок -->
<div class="collapse navbar-collapse d-md-none" id="navbarSupportedContent">
    <ul class="d-block d-md-none navbar-nav mr-3">
        ...
    </ul>
</div>

Comments

[Natalia ivanova]

Тоже такая мысль была.
Но я отказалась от неё в пользу grid, потому что, в данном случае, избегаем лишней разметки и, таким образом, получаем более гибкое решение.
Другое дело, если использовать только bootstrap классы, то, конечно, подойдёт вариант и с лишними блоками в разметке.

[gh0sty]

Natalia ivanova, да я просто за крупные проекты берусь, у меня и так оч много кастомных стилей))) Без bootstrap - никуда) А так норм, 20 чистых html страничек и 1500 строк стилей. Думаю, если будет grid-only - это еще +2000 строк стилей.

[gh0sty]

gh0sty, не frontend-ер по основной профессии)

[Natalia ivanova]

В любом случае, рада помочь)