Bootstrap 4 Navbar에서 탐색 항목을 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-12-06 20:47:13

원래의

266명이 탐색했습니다.

How to Center Navigation Items in a 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">

로그인 후 복사

CSS:

.navbar {
    display: flex;
    justify-content: center;
}

로그인 후 복사

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

반응형 조정

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

<div class="collapse navbar-collapse mr-auto">

로그인 후 복사

예

다음 코드를 고려하세요.

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

로그인 후 복사

CSS:

@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

로그인 후 복사

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

위 내용은 Bootstrap 4 Navbar에서 탐색 항목을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!