Question

我正在编写一个使用Boostrap 3.3的应用程序。它还使用开源material design framework。我的应用程序有一个列出用户的表。表格中的每一行都有一张图片，一个人名，一个电子邮件地址和一个操作菜单。这是我目前的代码：

<table class="table table-striped table-hover ">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Email address</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div><i class="material-icons">person</i></div></td>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>
        <div class="dropdown">
          <a href="#" data-target="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i><div class="ripple-container"></div></a>
          <ul class="dropdown-menu">
            <li><a href="javascript:void(0)">Action</a></li>
            <li><a href="javascript:void(0)">Another action</a></li>
            <li><a href="javascript:void(0)">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0)">Separated link</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

操作菜单打开左对齐菜单图标。但是，我正在尝试使其右对齐，以便内容向左打开。 example的Navbar部分中右侧“下拉列表”链接的行为是我正在尝试重现的行为。然而，我没有运气。我在float:right上添加了ul而没有任何运气。我错过了什么？

Answer 1

在Bootstrap中有一个名为dropdown-menu-right的班级。如果将其添加到下拉菜单中，菜单将显示在右侧而不是左侧（默认情况下）。

只需替换它：

<li class="dropdown-menu">

使用：

<li class="dropdown-menu dropdown-menu-right">

参见参考：http://getbootstrap.com/components/#dropdowns

注意：.pull-right现已弃用于bootstrap V3.1.0中的下拉菜单。

Bootstrap - Navbar中的右对齐菜单

1 个答案: