Как положить стартовый коллапс с тумблером в float-right и поверх всего? - PullRequest
Новая
       7

Как положить стартовый коллапс с тумблером в float-right и поверх всего?

0 голосов
/ 29 июня 2018

Я пытаюсь создать вертикальное меню с правой стороны и поверх всего содержимого тела, однако, как только я вхожу в положение, меню переходит на левую сторону.

Что я должен сделать, чтобы держать его поверх всего тела и с правой стороны? Помните, что к нему будет добавлено горизонтальное переполнение.

enter image description here

<!-- NAVBAR -->
<header role="main" id="header" class="fixed-top">     
    <nav class="navbar navbar-expand justify-content-between">
        <form class="form-inline form-row bg-white rounded shadow">
            <div class="col-12 col-sm-auto p-0">
                <div class="input-group ml-sm-2">
                    <div class="input-group-prepend">
                        <label class="input-group-text bg-transparent border-0" for="select-indicador"><i class="al-icon-line-chart al-text-dark-grey"></i></label>
                    </div>
                    <select id="select-indicador" class="custom-select form-control border-0 rounded-0 shadow-none">
                        <option selected>Indicador</option>
                        <option value="1">Venda Absoluta</option>
                    </select>
                </div>
            </div>
            <div class="col-12 col-sm-auto p-0">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span id="periodo-icon" class="input-group-text bg-transparent ml-2 ml-sm-0 border-0"><i class="far fa-calendar-alt al-text-dark-grey"></i></span>
                    </div>
                    <input type="text" id="periodo-picker" class="form-control border-0 shadow-none" placeholder="Período" aria-label="Período" aria-describedby="periodo-icon">
                </div>
            </div>
            <div class="col-12 col-sm-auto p-0">
                <button type="button"  id="btn-search" class="btn btn-lg d-block w-100 al-bg-green shadow-none"><i class="fab fa-searchengin fa-lg text-white"></i></button>
            </div>
        </form>
        <button type="button" class="btn navbar-toggle al-bg-dark-grey py-5 py-sm-2 ml-3 ml-sm-0 shadow" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle Navigation"><i class="al-icon-navmenu al-text-green"></i></button>
    </nav>
</header>

<!-- NAVBAR TOGGLE EXTERNAL CONTENT -->
<section role="external-content-section" id="navbarToggleExternalContent" class="collapse external-toogle-content-section float-right rounded al-bg-dark-grey">
    <div class="container">
        <div class="row">
            <div class="col-12"><button type="button" class="btn float-right pt-4 pt-sm-0 py-3 px-3 mt-4  mt-sm-3 border-0 bg-transparent shadow-none" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle Navigation"><i class="fas fa-times fa-3x al-text-green"></i></button></div>
            <div class="col-12" style="background-color: red"><a href="" class="float-left al-text-green"><h5>HOME</h5></a></div>
            <div class="col-12">
                <details class="float-left mt-3 mb-3">
                    <summary>Rio de Janeiro</summary>
                    <p><a href="#" class="summary-link"><h6>Boulevard Shopping Campos</h6></a></p>
                    <p><a href="#" class="summary-link"><h6>Carioca Shopping</h6></a></p>
                    <p><a href="#" class="summary-link"><h6>Carioca Shopping</h6></a></p>
                    <p><a href="#" class="summary-link"><h6>Caxias Shopping</h6></a></p>
                    <p><a href="#" class="summary-link"><h6>Shopping Grande Rio</h6></a></p>
                    <p><a href="#" class="summary-link"><h6>Shopping Leblon</h6></a></p>
                    <p><a href="#" class="summary-link"><h6>Via Parque Shopping</h6></a></p>
                </details>
            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 29 июня 2018

Вы упомянули, что используете bootstrap 4, поэтому используйте класс .float-right в вашем div.

Если вы хотите переместить div вправо с помощью пользовательского CSS, попробуйте следующее - 

.pull-right {
    right: 0px;
}

Просмотрите справку по начальной загрузке 4 *. 1008 *

...