Twitter Bootstrap Navbar를 중앙 링크로 수정

Twitter Bootstrap navbar를 사용하여 작업할 때 사용자는 기본 왼쪽 정렬이 아닌 중앙에 탐색 링크를 정렬해야 할 수도 있습니다. . 이를 달성하려면 CSS 스타일시트를 사용하여 다음과 같은 사용자 정의를 수행하십시오.

해결책

탐색 링크를 탐색 모음의 중앙에 배치하려면 다음 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;
}

대체 접근 방식

부트스트랩 기본값을 유지하고 특정 탐색 모음 메뉴를 대상으로 지정하려면 사용자 정의 클래스를 만들고 이를 탐색 모음 컨테이너에 적용합니다.

    

        ....
    

그런 다음 CSS 스타일시트에서 .center 클래스를 대상으로 지정합니다.

.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;
}

추가 고려 사항

하위 메뉴 항목을 왼쪽에 정렬하려면 다음 CSS 규칙을 추가하세요.

.center .dropdown-menu {
    text-align: left;
}