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

Bootstrap에서 탐색 항목 중앙 정렬

도전

Bootstrap에서는 브라우저 창 크기에 따라 탐색 모음의 탐색 항목(링크)을 중앙에 배치할 수 있습니다. 까다로운 작업이 될 것입니다. mr-auto 및 ml-auto 클래스를 사용하는 표준 부트스트랩 접근 방식은 브라우저 창 너비에서 로고 너비를 뺀 값을 기준으로 탐색을 효과적으로 중앙에 배치합니다. 완벽한 센터링을 달성하려면 보다 정확한 솔루션이 필요합니다.

솔루션

반응형 Flexbox 및 Margin 유틸리티 사용

Bootstrap 4는 d- 반응형 센터링을 달성할 수 있는 flex 및 mx-auto 클래스. 수행 방법은 다음과 같습니다.

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

이 코드에서는:

• .d-md-flex 클래스는 탐색 컨테이너를 중형 화면(및 대형)에서 유연하게 만들고 디스플레이를 flex로 설정합니다.
• .d-block 클래스는 더 작은 화면을 대상으로 하며 탐색 컨테이너를 block.
• .flex-row 클래스는 탐색 컨테이너의 하위 요소를 가로로 정렬합니다.
• .mx-md-auto 클래스는 중간 크기 이상의 화면에서 탐색 컨테이너를 가로 중앙에 배치합니다.
• .mx-0 클래스는 작은 화면에서 가로 여백을 제거하여 적절한 내용을 보장합니다. 정렬.
• .mr-auto 클래스는 접힌 탐색 항목을 오른쪽 정렬합니다.

이 접근 방식은 브라우저 창 크기에 따라 탐색 항목을 반응적으로 중앙에 배치하여 완벽한 정렬을 보장합니다.

추가 참고 사항

• Bootstrap 4.1 이상의 경우 다음을 사용할 수 있습니다. .mx-auto를 .navbar-nav 요소에서 직접 실행하면 동일한 효과를 얻을 수 있습니다.
• 탐색 항목이 뷰포트의 정확히 중앙에 오도록 하려면 CSS 그리드 접근 방식을 사용하는 것이 좋습니다.

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