Bootstrap - 容器中的中心標籤

我有一個使用Bootstrap 3的網頁。在這個頁面中，我有幾個標籤。此時，選項卡在頂部左對齊。你可以看到你自己在這個Bootply。我試圖找出如何使選項卡出現在標籤條的中心。截至目前，它看起來像這樣：Bootstrap - 容器中的中心標籤

+-------+-------+ 
| Tab 1 | Tab 2 | 
+  +-------+--------------------------------------------------+ 
| content               | 
|                 | 
|                 | 
|                 | 
+------------------------------------------------------------------+

不過，我想使它看起來像這樣：

      +-------+-------+ 
          | Tab 1 | Tab 2 | 
+-------------------------+  +--------------------------------+ 
| content               | 
|                 | 
|                 | 
|                 | 
+------------------------------------------------------------------+

我嘗試使用文本中心級沒有成功。我知道ul是一個塊級元素，所以它填充其容器的寬度。爲此，我嘗試在ul上設置float:left。但是那也行不通。 Bootply再一次是here。代碼如下所示：

<div class="container-fluid"> 
    <div class="container"> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First Tab</a></li> 
      <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second Tab</a></li> 
     </ul> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="first"> 
        <h2>First Tab</h2> 
       </div> 

       <div role="tabpanel" class="tab-pane" id="second"> 
        <h2>Second Tab</h2> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我不知道如何讓選項卡居中。

來源

2016-09-30 Zach Templeton

試試這個https://jsfiddle.net/czd60374/1/ –

我認爲這是你在找什麼https://stackoverflow.com/a/9422253/5168300

複製這個答案

導航的選項卡列表中的項目會自動漂浮由引導左邊，所以你必須重置，而是顯示它們作爲內聯塊，以及中心的菜單項，我們必須添加文本對齊的屬性：中心容器，就像這樣：

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/

編輯：修補版本，在IE7 +用戶提供工作@My頭在下面的評論傷害了下來。

來源

2016-09-30 17:12:45

你將有更新的CSS爲ul.nav-tabs和li，像這樣：

ul.nav-tabs { 
    text-align: center; 
} 
ul.nav-tabs li { 
    float: none; 
    display: inline-block; 
}

下面是一個小提琴鏈接：https://jsfiddle.net/m0nk3y/pwyumb3k/

來源

2016-09-30 17:13:24

你可以試試這個代碼

HTML：

<ul class=" ul-center" role="tablist"> 
      <li><a href="#">Item 1</a> </li> 
      <li><a href="#">Item 2</a> </li> 
    </ul>

CSS：

.ul-center{ 
    margin:0; 
    padding:0; 
    clear:both; 
    text-align:center; 
} 
.ul-center li{ 
    display:inline-block; 
    padding:10px 20px; 
    background-color:#fff; 
    margin:0; 
}

現場演示：https://jsfiddle.net/czd60374/1/

來源

2016-09-30 17:19:09

Bootstrap - 容器中的中心標籤

回答

相關問題