Question

我有一个使用Bootstrap 3的网页。在这个网页中，我使用的是带有列标题的表。列标题需要居中。但是，我还需要在每个列标题的右上角有一个下拉菜单。最后一部分就是抛弃一切。

正如您在此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>

我的问题是，如何在列标题的右上角放置一个下拉菜单，并仍然将其余内容居中？

Answer 1

只需使用绝对定位使文本忽略下拉按钮。然后，您可以相对于其父级（th标记）移动它们。请注意，您需要为th代码设置relative的位置才能实现此目的：

CSS

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

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

注意：红色边框就是为了帮助澄清正在发生的事情。

希望这有帮助！

Bootstrap - 对齐表头中的内容

1 个答案: