Bootstrap Navbar 내에서 요소를 중앙에 어떻게 배치합니까?

Bootstrap Navbar에서 요소 중앙에 배치

문제: 다양한 시도에도 불구하고 사용자가 Bootstrap 내에서 요소를 중앙에 배치하지 못합니다. navbar.

답변:

Bootstrap 5(2021)

Navbar는 flexbox를 활용하므로 mx-auto 클래스를 사용하여 요소를 중앙에 배치할 수 있습니다.

<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

부트스트랩 4.1

Bootstrap 4.1 이상의 경우 왼쪽 및 오른쪽 메뉴를 정렬하려면 왼쪽 당기기 및 오른쪽 당기기 대신 mx-auto를 사용하세요.

<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

기타 센터링 옵션

• 위치: 절대;: 중앙에 배치할 요소를 위치: 절대;로 설정합니다. 그리고 변환을 사용하세요:translateX(-50%);.
• Flexbox 중첩: 중앙에 있는 항목도 표시하도록 합니다: flexbox 및 justify-content: center.

이러한 솔루션에는 중앙에 있는 요소를 다양한 인접 요소와 완벽하게 정렬하지 못하는 등의 단점이 있을 수 있다는 점을 기억하십시오. 너비.

추가 참고 사항:

• main-nav를 원하는 navbar 클래스 이름으로 바꾸십시오.
• Navbar가 단일 navbar-nav인 경우 justify-content-center를 사용하여 중앙에 배치하세요.
• 데스크톱에서는 요소를 중앙에 배치하고 모바일에서는 왼쪽으로 정렬하고, 미디어 쿼리를 사용하세요.
• Navbar에 대한 자세한 내용은 [Bootstrap 문서](https://getbootstrap.com/docs/4.5/comComponents/navbar/)를 살펴보세요. 맞춤화.

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