Bootstrap navbar 내에서 요소를 중앙에 배치하려면 어떻게 해야 합니까?

Bootstrap Navbar의 요소 중심 맞추기

Bootstrap Navbar의 요소 중심 맞추기는 구성 요소가 유연하게 배열되는 방식으로 인해 어려울 수 있습니다. 그러나 이를 달성하는 몇 가지 효과적인 방법은 다음과 같습니다.

Bootstrap 5(2021)

Navbar는 여전히 flexbox를 사용하므로 정렬 원칙은 Bootstrap 4와 유사하게 유지됩니다. "웹사이트 이름"은 mx-auto를 사용하여 중앙에 배치할 수 있습니다. 왼쪽 및 오른쪽 사이드 메뉴는 더 이상 플로팅할 필요가 없습니다.

예제 코드:

<nav></nav>

Bootstrap 4.1

이제 Navbar는 Flexbox를 활용하여 다음을 사용하여 중앙 정렬을 가능하게 합니다. mx-auto. 왼쪽 및 오른쪽 메뉴에서 더 이상 부동 소수점을 사용할 필요가 없습니다.

예제 코드:

<nav></nav>

Bootstrap 4 Beta

Navbar에 단일 navbar-nav만 있는 경우 다음을 사용할 수도 있습니다. justify-content-center를 사용하여 콘텐츠를 정렬하세요.

절대 위치를 사용한 Navbar Centering

다음을 사용하여 중앙에 두고 싶은 요소를 절대적으로 배치할 수 있습니다. :

.abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); }

Flexbox를 사용한 Navbar 센터링 중첩

또 다른 옵션은 flexbox를 사용하여 항목을 중앙에 배치하는 것입니다.

참고: 위의 솔루션은 왼쪽을 기준으로 "웹사이트 이름"을 중앙에 배치합니다. 그리고 오른쪽 navbar-nav. flex-fill 클래스를 추가하면 각 섹션이 Navbar의 너비를 채우고 인접한 섹션의 너비가 다를 때 정렬이 잘못되는 것을 방지할 수 있습니다.

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