Bootstrap Navbar에서 탐색 항목을 중앙에 배치하려면 어떻게 해야 합니까?

Bootstrap에서 Nav 항목 중앙화: 종합 가이드

웹 페이지를 탐색하려면 탐색 요소에 쉽고 직관적으로 액세스해야 합니다. 탐색 항목을 적절하게 정렬하는 것은 사용자 경험과 시각적 매력을 높이는 데 매우 중요합니다. 널리 사용되는 프런트 엔드 프레임워크인 Bootstrap은 탐색 항목을 중앙에 배치하는 솔루션을 제공합니다.

문제:

Bootstrap 4를 사용할 때 직면하는 일반적인 문제는 탐색 정렬입니다. 탐색 모음 내의 항목("nav-items")입니다. 기본적으로 이러한 항목은 왼쪽에 정렬됩니다. 사용자는 대신 중앙에 표시하기를 원할 수 있습니다. navbar의 기능과 반응성을 저하시키지 않고 정렬을 조정하는 것은 특정 솔루션이 필요한 과제입니다.

해결책:

Bootstrap 4는 탐색 항목 정렬을 위한 여러 옵션을 제공합니다. , mr-auto 및 ml-auto 유틸리티 클래스를 포함합니다. 이러한 클래스는 어느 정도 센터링을 제공하지만 특정 시나리오에서는 정확한 정렬이 이루어지지 않을 수 있습니다. 정확한 중앙 정렬을 위해 Flexbox와 여백 유틸리티의 조합을 권장합니다.

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:

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

이 코드 예제는 탐색 중심에 위치합니다. 항목의 반응성을 유지하면서 탐색 모음 내에서 항목을 수평으로 배치합니다. mx-auto 유틸리티 클래스는 요소가 사용 가능한 너비 내에서 균등한 간격을 갖도록 여백을 자동으로 조정합니다.

위 내용은 Bootstrap Navbar에서 탐색 항목을 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!