Twitter Bootstrap의 탐색 모음에서 링크를 중앙에 어떻게 배치할 수 있나요?

중앙 집중식 링크로 Twitter Bootstrap의 Navbar 사용자 정의

Twitter Bootstrap은 다목적 navbar 구성 요소를 포함하여 반응형 웹 디자인을 구축하기 위한 강력한 프레임워크를 제공합니다. 그러나 탐색 모음의 기본 왼쪽 정렬 링크에서 벗어나려면 CSS를 일부 조정해야 합니다.

해결책 1: .tabs 및 .pills 사용

이전 게시물에서는 .tabs 및 .pills를 사용하여 링크를 중앙에 배치하려고 했습니다. 그러나 Bootstrap은 이러한 스타일을 기본 탐색 모음이 아닌 탐색 탭 및 페이지 매김 컨트롤에 구체적으로 적용하기 때문에 이 접근 방식은 작동하지 않았습니다.

해결책 2: .nav 및 .navbar-inner 클래스 사용자 정의

navbar 링크를 중앙 집중화하는 올바른 접근 방식은 링크가 포함된 .nav와 navbar의 전체 정렬을 설정하는 .navbar-inner의 스타일을 수정하는 것입니다. 업데이트된 CSS는 다음과 같습니다.

<code class="css">.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner {
    text-align: center;
}</code>

이 CSS는 기본 스타일을 재정의하고 탐색 모음 링크가 가로 중앙에 표시되도록 합니다.

타겟팅된 사용자 정의를 위한 사용자 정의 클래스 사용

페이지의 다른 탐색 요소에 영향을 주지 않으려면 대상 탐색 모음에 대한 사용자 정의 클래스를 생성할 수 있습니다. 예:

<code class="html"><div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div></code>

그런 다음 이 사용자 정의 클래스에 다음 CSS를 적용할 수 있습니다.

<code class="css">.center.navbar .nav,
.center.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}</code>

하위 메뉴 항목 정렬

이후 탐색 모음 링크를 중앙에 배치하려면 하위 메뉴 항목을 왼쪽으로 다시 정렬해야 합니다. 다음 추가 CSS를 사용하세요.

<code class="css">.center .dropdown-menu {
    text-align: left;
}</code>

이러한 수정을 통해 다른 탐색 요소의 기능이나 스타일을 손상시키지 않고 탐색 모음 링크를 중앙에 성공적으로 배치할 수 있습니다.

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