[html] Twitter 부트 스트랩 탭을 페이지 중앙에 배치하려면 어떻게합니까?

Program / 글쓴이

전환 가능한 탭을 만들기 위해 트위터 부트 스트랩을 사용하고 있습니다. 다음은 내가 사용하는 CSS입니다.

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

이 html은 탭을 올바르게 표시하지만 왼쪽으로 당겨졌습니다. 탭을 페이지 중앙에 맞추기 위해 CSS를 수정 해 보았지만 아직 운이 없습니다. 나는 더 많은 CSS 경험을 가진 사람이 이것을하는 방법을 알 것이라고 생각했습니다.

참고로 탐색 알약을 중앙에 배치하는 것에 대한 또 다른 질문이 있습니다. 시도했지만 일반 탐색 탭에서는 작동하지 않았습니다.

감사.

답변

nav-tabs목록 항목은 부트 스트랩에 의해 자동으로 왼쪽으로 이동하므로이를 재설정하고 대신으로 표시해야하며 inline-block중앙 메뉴 항목에 속성을 text-align:center컨테이너 에 추가해야합니다 .

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

데모 : http://jsfiddle.net/U8HGz/2/show/
여기에서 편집 : http://jsfiddle.net/U8HGz/2/

편집 : 사용자 @My Head가 제공 한 IE7 +에서 작동하는 패치 버전은 아래 댓글에 상처를 입 힙니다.

데모 : http://jsfiddle.net/U8HGz/3/show/
여기에서 편집 : http://jsfiddle.net/U8HGz/3/

답변

받아 들여진 대답은 완벽합니다. 표준 왼쪽 정렬 탭과 나란히 사용할 수 있도록 추가로 사용자 지정할 수 있습니다.

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

사용하려면 탭 요소에 “중심”클래스를 추가하세요. 

<ul class="nav nav-tabs centered" >
..
</ul>

답변

수업을 추가하면 nav-justified저에게 효과적입니다. 이렇게하면 탭이 중앙에 정렬 될뿐만 아니라 상단에 멋지게 펼쳐집니다.

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

받아 들여지는 대답이 잘 작동하지만 위의 내용이 Bootstrap에 더 자연 스럽습니다.

답변

간단히 추가

margin-left:50%;

탭을 설정할 때 나를 위해 일했습니다.

예를 들어

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

답변

부트 스트랩 그리드 를 사용 하여 탐색 탭을 중앙에 배치 할 수 있습니다 . 부트 스트랩 그리드는 12 개의 같음 열로 나뉘므로 4 개 열 오프셋으로 탐색에 4 개 열을 쉽게 사용할 수 있습니다.

<div class="col-sm-4 col-sm-offset-4">.

따라서 왼쪽과 오른쪽에 4 개의 열이 비어있는 페이지 중앙 (반응 형 솔루션)에서 탐색을 할 수 있습니다.

반응 형 웹 페이지를 만드는 데 그리드가 정말 유용하다는 것을 알았습니다. 행운을 빕니다!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

답변

bs4 를 사용하는 경우 단순히 justify-content-center탐색 탭에 클래스를 추가 하여 페이지 중앙에 배치 할 수 있습니다 . 탭이 정당화되기를 원하면 (완전히) nav-justified클래스를 추가하십시오 .이 경우 탐색에 3 개의 항목이 있으면 각각 33 %가 있습니다. 5 개의 항목이 있으면 각각 20 %가 있습니다.

또 다른 방법은 bs3을text-center 사용하는 경우 추가 하는 것 입니다.

답변

‌ 부트 스트랩 자체에는 nav-justified. 다음과 같이 추가하기 만하면됩니다.

<ul class="nav nav-tabs nav-justified">

당신의 정렬 중심의 콘텐츠를 원하는 경우 <li>뿐만 아니라, 그합니다 disply: inline-block.