Bootstrap выпадающее меню не переворачивается - PullRequest
Новая
       66

Bootstrap выпадающее меню не переворачивается

1 голос
/ 03 мая 2020

Я учусь создавать боковую навигацию с раскрывающимся списком , открывающимся справа. Я использую класс .dropright, чтобы инициировать это поведение, как сказано на стороне документации bootstrap -4. Однако при использовании .dropright .dropdown-menu не переворачивается, если он находится близко к нижней части области просмотра, а вместо этого отображается под нижней границей области просмотра, в то время как экран прокручивается. Если я удаляю .dropright переворот работает. Можете ли вы помочь мне исправить это, пожалуйста?

Я использую этот проект https://github.com/BlackrockDigital/startbootstrap-simple-sidebar, с этим изменением на #sidebar-wrapper: 

<div class="bg-light border-right" id="sidebar-wrapper">
  <div class="sidebar-heading">Start Bootstrap </div>
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Shortcuts</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>

    <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-toggle="flip" aria-haspopup="true" aria-expanded="false">Dropright</button>
        <div class="btn-group dropright">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-toggle="flip" aria-haspopup="true" aria-expanded="false">Dropright</button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Shortcuts</a>
                <a href="#" class="dropdown-item">Overview</a>
                <a href="#" class="dropdown-item">Events</a>
                <a href="#" class="dropdown-item">Profile</a>
                <a href="#" class="dropdown-item">Status</a>
            </div>
        </div>
    </div>
</div>

пример нежелательного поведения

пример желаемого поведения

...