Как центрировать навигационную панель в Bootstrap 4 с помощью Flexbox

Question

Что ж, я хочу добиться этого: https://i.imgur.com/BDM7JvD.jpg с помощью Bootstrap 4 Navbar.

Как я могу централизовать навигационные ссылки / элементы в середине окна просмотра, используя утилиты flexbox или mr-auto и т.д. Я пытаюсь избежать подхода позиционирования, основанного на CSS, потому что он может не подходить для разных устройств. Но конечно, если подход CSS обещает быть в той же централизованной позиции, то почему бы и нет!

ПРИМЕЧАНИЕ: некоторые пользователи могут сказать, что используют утилиты justify, так как вы не можете использовать их как марку navbar, а navbar-nav нельзя заключить в div. Если я это сделаю, макет испортится.

nav class = "navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">

        <div class="container">

            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Disabled</a>
                    </li>
                </ul>
            </div>

        </div>

    </nav>

Answer 1

Используйте утилиты flexbox для выравнивания компонентов так, как вы хотите. Здесь justify-content-center используется для центрирования navbar-nav,

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Brand</a>
    <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="collapse">Link</a>
            </li>
        </ul>

    </div>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href=""><i class="fa fa-facebook"></i></a></li>
        <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-twitter"></i></a></li>
    </ul>
</nav>

Больше примеров выравнивания Navbar

Обновление Bootstrap 4.0.0

navbar-toggleable-sm сейчас navbar-expand-md
navbar-inverse сейчас navbar-dark
navbar-fixed-top сейчас fixed-top