Bootstrap Navigation Bar 중심 : 아름다운 탐색을 만듭니다

부트 스트랩 내비게이션 바를 중앙을 중앙으로 만드는 방법은 무엇입니까? 유틸리티 클래스 정당화-컨텐츠 중심을 요소에 추가하여 모든 요소를 ​​가로로 중앙으로 추가하십시오. 선택 사항 : 오프셋 클래스 (예 : 오프셋 -1)를 추가하여 탐색 막대를 오프셋하고 오프셋 클래스의 값에 따라 왼쪽 또는 오른쪽으로 오프셋.

부트 스트랩 내비게이션 바가 중앙에 있습니다

Bootstrap의 강력한 유연성을 통해 아름다운 중앙 탐색 막대를 쉽게 만들 수 있습니다.

방법:

1. 유틸리티 클래스 추가 :

   • <nav></nav> 요소에 유틸리티 클래스 justify-content-center 추가하십시오.
   • 이것은 내비게이션 바의 모든 요소를 ​​가로로 중심으로합니다.

2. 선택 사항 : 오프셋 클래스 추가 :

   • 내비게이션 바의 내용을 상쇄하려면 <nav></nav> 요소에 offset-1 또는 offset-md-3 과 같은 오프셋 클래스를 추가 할 수 있습니다.
   • 오프셋 클래스의 값에 따라 왼쪽 또는 오른쪽으로 내비게이션 막대가 상쇄됩니다.

샘플 코드 :

 <code class="html"><nav class="navbar navbar-expand-lg justify-content-center"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Disabled</a> </li> </ul> </div> </nav></code>

위의 방법을 사용하면 수평 중앙 부트 스트랩 내비게이션 바를 쉽게 만들 수 있습니다.

위 내용은 Bootstrap Navigation Bar 중심 : 아름다운 탐색을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!