Bootstrap 4 Navbar에서 탐색 항목을 중앙에 배치하는 방법은 무엇입니까?

Bootstrap에서 탐색 항목 중앙 정렬

Bootstrap 4에서는 다음을 사용하여 탐색 항목(링크)을 탐색 모음 중앙에 정렬할 수 있습니다. 플렉스박스 속성. 방법은 다음과 같습니다.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.navbar {
    display: flex;
    justify-content: center;
}

위 코드는 flexbox의 표시 속성을 사용하여 navbar를 flex 컨테이너로 설정하고 justify-content를 사용하여 탐색 항목을 flex 컨테이너에 정렬합니다. 센터. Bootstrap의 축소 클래스는 더 작은 화면 크기에서 탐색 항목을 숨기는 데 사용됩니다.

반응형 조정

응답성을 위해 Bootstrap의 mr-auto 유틸리티 클래스를 사용하여 탐색 항목이 브라우저 크기에 맞게 중앙에 위치함 변경 사항:

<div class="collapse navbar-collapse mr-auto">
<p><strong>예</strong></p>
<p>다음 코드를 고려하세요.</p>
<pre class="brush:php;toolbar:false"><nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

이것은 코드는 브라우저 창 너비가 다음보다 클 때 그에 따라 justify-content를 설정하는 미디어 쿼리를 추가합니다. 768px, 더 큰 화면에서만 탐색 항목을 중앙에 배치합니다.