Навигационное меню. Не происходит выравнивание

Question

<nav class="navbar navbar-dark navbar-static-top bg-dark" style="position: -webkit-sticky; position: sticky; top: 0;">
    <div class=" container">
        <div class="topnav ">
            <button class="btn btn-outline-success " type="button ">
            <a class="active " href="#home ">Домой</a>
        </button>
            <button class="btn btn-outline-success my-2 my-sm-0" type="button ">
            <a href="#news ">Режим редактирования</a>
        </button>
        </div>
    </div>
</nav>

Хотелось бы уточнить, почему у меня здесь кнопка "Режим редактирования" не выравнивается по правому краю сетки? Bootstrap подключен через cdn

Answer 1

У Вас контейнер <div class="topnav "> ограничивает размеры места под кнопки.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<nav class="navbar navbar-dark navbar-static-top bg-dark" style="position: -webkit-sticky; position: sticky; top: 0;">
    <div class=" container">
            <button class="btn btn-outline-success " type="button ">
                <a class="active " href="#home ">Домой</a>
            </button>
            <button class="btn btn-outline-success my-2 my-sm-0" type="button ">
                <a href="#news ">Режим редактирования</a>
            </button>
    </div>
</nav>

Ещё, если позволите совет, style="position: -webkit-sticky; position: sticky; top: 0;" можно заменить на fixed-top

Пример:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark navbar-static-top bg-dark fixed-top">
    <div class=" container">
            <button class="btn btn-outline-success " type="button ">
                <a class="active " href="#home ">Домой</a>
            </button>
            <button class="btn btn-outline-success my-2 my-sm-0 ml-auto" type="button ">
                <a href="#news ">Режим редактирования</a>
            </button>
    </div>
</nav>

БЛОГ НА HUSL

Навигационное меню. Не происходит выравнивание

Ответы (1 шт):