Класс колонок карт Bootstrap4 не работает должным образом на некоторых устройствах (iPhone5) и разрешениях - PullRequest
Новая
       27

Класс колонок карт Bootstrap4 не работает должным образом на некоторых устройствах (iPhone5) и разрешениях

0 голосов
/ 26 октября 2018

Я использую Bootstrap4 «карточки-столбцы» внутри выпадающего меню, чтобы показать отзывчивое меню с карточками в стиле каменной кладки. Он отлично работает во многих разрешениях и устройствах (книжном и альбомном), но в iPhone 5.x, нескольких устройствах и некоторых разрешениях (шириной около 600 пикселей), в зависимости от содержимого, карты выходят за пределы родительского раздела, и родительский div (столбцы карт) обрезает экран. 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button aria-controls="mainMenu" aria-expanded="false" aria-label="Menu" class="navbar-toggler" data-target="#mainMenu" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainMenu">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a aria-expanded="false" aria-haspopup="true" class="nav-link" data-toggle="dropdown" href="#" role="button" title="Administração">
                    <i class="fas fa-cog"></i> <span class="nav-label">Administração</span>
                </a>
                <div class="dropdown-menu">
                    <div class="cards-container m-0 p-3"> <!-- This padding is mandatory -->
                        <div class="card-columns"> <!-- It doesn't work in iPhone 5/SE, other devices and some specific resolutions. The card's width expands outside of its parent -->
                            <div class="card">
                                <div class="card-header">Configurações e Parâmetros</div>
                                <div class="card-body">
                                    <ul>
                                        <li><a href="#">Configurações Gerais</a></li>
                                        <li><a href="#">Calendários Corporativos</a></li>
                                        <li><a href="#">Faixas de Tolerância</a></li>
                                        <li><a href="#">Menus de Estratégias</a></li>
                                        <li><a href="#">Menus de Projetos/Programas/Processos</a></li>
                                        <li><a href="#">Configuração de Relatórios Dinâmicos</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">Configuração de Fluxos e Formulários</div>
                                <div class="card-body">
                                    <ul>
                                        <li><a href="#">Modelos de Fluxos</a></li>
                                        <li><a href="#">Modelos de Formulários</a></li>
                                        <li><a href="#">Perfis de Acesso aos Fluxos</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">Relatórios</div>
                                <div class="card-body">
                                    <ul>
                                        <li><a href="#">Auditoria</a></li>
                                        <li><a href="#">Relatórios de Administração</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

Codepen

...