Question

我试图在主体的所有内容的右侧和顶部创建一个垂直菜单，但是，一旦我输入位置，菜单就会转到左侧。

我应该怎么做才能将其保持在整个身体顶部和右侧？请记住，将向其添加水平溢出。

<!-- 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>

Answer 1

您已经提到过您正在使用引导程序4，因此请在div中使用类.float-right。

如果您想使用自定义CSS将div移至右侧，请尝试以下操作-

.pull-right {
    right: 0px;
}

Review bootstrap 4 doc for reference.

如何将折叠切换自举程序放置在右上浮动和所有内容的顶部？

1 个答案: