Twitter Bootstrap Navbar 탐색 링크를 중앙에 배치하는 방법은 무엇입니까?

Twitter Bootstrap Navbar 수정: 탐색 링크 중심 배치

Twitter Bootstrap navbar는 웹사이트 탐색을 위한 실용적인 솔루션을 제공합니다. 그러나 때로는 탐색 링크를 중앙에 배치하는 등 모양을 사용자 정의하고 싶을 수도 있습니다.

문제: 탐색 링크를 중앙에 배치

navbar 정렬을 수정하려면 일부 CSS 코드가 필요합니다. 그러나 일부 방법에서는 원하는 결과를 얻지 못할 수도 있습니다. 올바른 접근 방식을 살펴보겠습니다.

해결책: 인라인 블록 레이아웃 및 텍스트 정렬

탐색 메뉴 항목을 중앙에 배치하려면 표시 속성을 float: left 대신 inline-block으로 설정하세요. 이렇게 하면 레이아웃을 깨지 않고 항목을 가로로 정렬할 수 있습니다. 추가적으로 navbar 내부 컨테이너의 text-align 속성을 중앙으로 설정하세요.

<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>

특정 Navbar 인스턴스 타겟팅

웹 페이지에 navbar가 여러 개 있는 경우 중앙에 배치하려는 특정 탐색 표시줄을 대상으로 하는 전용 CSS 클래스입니다. 이렇게 하면 다른 탐색 모음에 원치 않는 영향이 미치는 것을 방지할 수 있습니다.

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

<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>

Demo

라이브 데모 보기: http://jsfiddle.net/C7LWm/show /

위 내용은 Twitter Bootstrap Navbar 탐색 링크를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!