Как делать адаптивным?

Question

[Jedi]

Почему то адаптивный bootstrap перелез ширину экрана..

Че делать ?

Answer 1

[y0u]

https://jsfiddle.net/y0u/50833bmm/

В Bootstrap 4 есть класс dropdown-menu-right, который нужно добавить к блоку dropdown-menu.

В вашем случае этого не достаточно. Сейчас у вас структура меню следующая:

<nav class="navbar">
    ...
    <div class="navbar-collapse">
        <ul class="navbar ml-auto">
            <li>...</li>
        </ul>
        <div class="user-actions">
            <div class="dropdown">
                ...
            </div>
        </div>
    </div>
</nav>

А должно быть:

<nav class="navbar">
    ...
    <div class="navbar-collapse">
        <ul class="navbar mr-auto">
            <li>...</li>
        </ul>
        <ul class="navbar mr-auto user-actions">
            <li class="dropdown">
                ...
            </li>
        </ul>
    </div>
</nav>

Не обязательно использовать список UL, но обязательно нужно использовать класс .navbar-nav.

.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).

— https://getbootstrap.com/docs/4.0/components/navba...

Comments

[Jedi]

Спасибо большое!

Answer 2

[Данил Разумков]

Можно увидеть код.

Comments

[Jedi]

https://pastebin.com/jxxjJNzb

[Jedi]

https://pastebin.com/GuF9MNU3

[Данил Разумков]

Предлагаю в head добавить,

<style>
  body{
    overflow-x:hidden;
  }
</style>

https://jsfiddle.net/m3feqsev/9/