Bootstrap 4 Navbar에서 탐색 링크를 정확하게 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 4 Navbar에서 탐색 링크를 정확하게 중앙에 배치하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-21 12:06:10

원래의

670명이 탐색했습니다.

How to Precisely Center Navigation Links in a Bootstrap 4 Navbar?

Bootstrap에서 Nav 항목 중앙에 배치

브라우저 창 크기를 기준으로 Bootstrap 4 navbar 내에서 탐색 링크를 중앙에 배치하는 작업은 다음과 같습니다. 공통적인 과제임이 입증되었습니다. ml-auto 및 mr-auto를 사용하는 간단한 솔루션은 근접할 수 있지만 정확한 센터링을 달성하지 못합니다.

이 문제를 해결하기 위해 플렉스박스와 마진 유틸리티를 반응적으로 활용하는 포괄적인 접근 방식을 제공합니다.

Bootstrap 4 Alpha 6 이상

Bootstrap 버전 4 Alpha 6 이상에서 다음 코드는 브랜드와 링크 센터링을 모두 제공합니다.

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse mr-auto">

로그인 후 복사

Bootstrap 4.1

Bootstrap 4.1 이상에서는 센터링 전략이 동일하게 유지됩니다. 다음은 모바일에서 링크를 정렬하고 브랜드를 왼쪽에 배치하는 예입니다.

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

로그인 후 복사

뷰포트의 정확한 링크 센터링

정확한 링크 센터링이 필요한 경우 뷰포트에 대해 다음 접근 방식을 시도해 보세요.

<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" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

로그인 후 복사

추가 예제는 제공된 링크를 참조하세요. Bootstrap 4의 navbar 정렬.

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