Question

我正在使用Twitter Bootstrap创建Button下拉菜单，但内部菜单按钮似乎没有在它下方对齐。下拉列表位于页面的中央，菜单显示在页面的最左侧。

我曾尝试使用LEFT，PADDING，MARGIN-LEFT属性，但没有成功。

代码：

<span class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Export
    <span class="caret"></span>
    </a>

    <ul class="dropdown-menu" style=" margin-left:498;" >
        <!-- dropdown menu links -->
        <li>
          <asp:LinkButton ID="LinkButton2" runat="server" onclick="btnExportExcel_Click">Excel</asp:LinkButton>
        </li>

         <li>
            <asp:LinkButton ID="LinkButton1" runat="server" onclick="btnExportCSV_Click">CSV</asp:LinkButton>
        </li>
    </ul>
</span>

Answer 1

我认为按钮组的标记指定使用<div class="btn-group">而不是span。试试那里的div

Answer 2

你甚至可以试试这个......

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     <!-- dropdown menu links -->
    <li>
      <asp:LinkButton ID="LinkButton2" runat="server" onclick="btnExportExcel_Click">Excel</asp:LinkButton>
    </li>

     <li>
        <asp:LinkButton ID="LinkButton1" runat="server" onclick="btnExportCSV_Click">CSV</asp:LinkButton>
    </li>...
  </ul>
</div>

如果您没有使用完整的bootstrap.js编译，则需要添加bootstrap-dropdown.js。

Answer 3

尝试在此pull-left

中加入课程class='dropdown-menu pull-left'

Twitter Bootstrap - 使用按钮下拉菜单 - 菜单未对齐

3 个答案: