Bootstrap 4에서 탐색 항목을 중앙에 어떻게 배치할 수 있나요?

Bootstrap에서 탐색 항목 중앙 정렬

Bootstrap 4에서는 Flexbox 및 여백 유틸리티를 사용하여 탐색 항목(링크)을 수평으로 정렬할 수 있습니다.

부트스트랩 4 알파 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">

이 코드에서는 d-md-flex 및 d-block 클래스가 사용됩니다. 중형 화면 이상에서 브랜드와 링크를 가로로 정렬합니다. flex-row 클래스는 항목이 나란히 배열되도록 보장합니다. mx-md-auto 및 mx-0 클래스는 브랜드 이미지의 너비에 맞게 항목을 사용 가능한 공간의 중앙에 배치합니다.

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>
  <div class="collapse navbar-collapse">

이 경우 mx-auto는 navbar-nav는 링크만 중앙에 배치합니다. justify-content-center와 같은 다른 기술을 사용하여 브랜드를 중앙에 배치할 수 있습니다.

뷰포트에서 정확하게 링크 위치 지정

링크를 뷰포트의 중앙에 정확히 배치하려면 다음을 고려하세요. 기술:

<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="navbar-nav">

여기서 navbar-nav는 고정된 너비와 justify-content: center 링크를 화면 중앙에 정확하게 정렬합니다.

추가 사용자 정의 및 추가 예를 보려면 아래 참조 섹션에 제공된 링크를 참조하세요.

위 내용은 Bootstrap 4에서 탐색 항목을 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!