Bootstrap - 對齊表格標題中的內容

我有一個使用Bootstrap 3的網頁。在此網頁中，我使用了一個帶有列標題的表格。列標題需要居中。但是，我還需要在每個列標題的右上角有一個下拉菜單。最後一部分是拋開所有東西。Bootstrap - 對齊表格標題中的內容

正如您在此Bootply中看到的，由於下拉菜單，我的列標題未正確居中。該下拉菜單甚至沒有正確定位。我試過使用相對定位，但顯然這不適用於列標題。我的代碼如下所示：

<table class="table"> 
    <thead> 
    <tr><th>Name</th> 
    <th class="text-center"> 
     <div>Chicago</div> 
     <small class="text-muted">Illinois</small> 
     <div class="pull-right"> 
     <div class="dropdown"> 
      <button class="btn dropdown-toggle" type="button" id="chicagoDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
      <i>:</i> 
      </button> 
      <ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="chicagoDropDownMenu"> 
      <li><a href="#">Weather</a></li> 
      <li><a href="#">Visitors Guide</a></li> 
      <li><a href="#">Directions</a></li> 
      </ul> 
     </div> 
     </div>  
    </th> 
    <th class="text-center"> 
     <div>New York</div> 
     <small class="text-muted">New York</small> 
     <div class="pull-right"> 
     <div class="dropdown"> 
      <button class="btn dropdown-toggle" type="button" id="nyDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
      <i>:</i> 
      </button> 
      <ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="nyDropDownMenu"> 
      <li><a href="#">Weather</a></li> 
      <li><a href="#">Visitors Guide</a></li> 
      <li><a href="#">Directions</a></li> 
      </ul> 
     </div> 
     </div>    
    </th>  
    <th class="text-center"> 
     <div>San Francisco</div> 
     <small class="text-muted">California</small> 
     <div class="pull-right"> 
     <div class="dropdown"> 
      <button class="btn dropdown-toggle" type="button" id="sfDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
      <i>:</i> 
      </button> 
      <ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="sfDropDownMenu"> 
      <li><a href="#">Weather</a></li> 
      <li><a href="#">Visitors Guide</a></li> 
      <li><a href="#">Directions</a></li> 
      </ul> 
     </div> 
     </div>  
    </th> 
    </tr></thead> 
</table>

我的問題是，如何在下拉菜單中列標題的右上角的位置，並且仍然居中其餘內容？

來源

2017-04-06 Gary

只需使用絕對定位使文本忽略下拉按鈕。然後，您可以將它們相對於其父項（th標記）移動。請注意，你需要給th標籤的relative的位置對於這項工作：

CSS

.dropdown { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

th { 
    position: relative; 
    border: 1px solid red;  
}

注：的紅色邊框是隻是爲了幫助澄清這是怎麼回事。

希望這會有所幫助！

來源

2017-04-06 17:31:07

Bootstrap - 對齊表格標題中的內容

回答

相關問題