bootstrap 子菜单出现故障

Question

我用bootstrap3,bootstrap table and bootstrap submenu

我有一个bootstraptable。在它之上，我有一个带有子菜单的按钮。在按钮中，我有一些小故障。

奇怪的是，鼠标悬停仅对 Annuler、Payer、Comptant 和 Rembourser 有效。付款人下也有一行开始。

试图调试它，但找到了解决方案。

<div id="toolbar" class="btn-group">
    <button class="btn btn-primary" type="button">Actions</button>
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
        <li><a id="cancelPaymentAction" tabindex="0">Annuler</a></li>
        <li class="divider"></li>
        <li><a tabindex="0">Payer</a></li>
        <li class="pull-right"><a data-payment-mode="CASH" tabindex="0">Comptant</a></li>
        <li class="pull-right"><a data-payment-mode="DEBIT" tabindex="0">Débit</a></li>
        <li id="creditCardPaymentAction" class="pull-right"><a data-payment-mode="CREDITCARD" tabindex="0">Carte de crédit</a></li>
        <li class="pull-right"><a data-payment-mode="GIFTCARD" tabindex="0">Carte cadeaux</a></li>
        <li class="pull-right"><a data-payment-mode="CHECK" tabindex="0">Chèque</a></li>
        <li class="divider"></li>
        <li id="refundPaymentAction"><a tabindex="0">Rembourser</a></li>
    </ul>
</div>

Answer 1

bootstrap 子菜单中的故障是由于 pull-right 引起的。只需从所有子菜单中删除它 li 然后一切正常。

如果您想将 li 项目子菜单设为 right aligned，请使用 text-right class 代替 pull-right

查看演示HERE

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-6 centered">
      <div id="toolbar" class="btn-group pull-right">
        <button class="btn btn-primary" type="button">Actions</button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a id="cancelPaymentAction" tabindex="0">Annuler</a></li>
          <li class="divider"></li>
          <li><a tabindex="0">Payer</a></li>
          <li><a data-payment-mode="CASH" tabindex="0">Comptant</a></li>
          <li><a data-payment-mode="DEBIT" tabindex="0">Débit</a></li>
          <li id="creditCardPaymentAction"><a data-payment-mode="CREDITCARD" tabindex="0">Carte de crédit</a></li>
          <li><a data-payment-mode="GIFTCARD" tabindex="0">Carte cadeaux</a></li>
          <li><a data-payment-mode="CHECK" tabindex="0">Chèque</a></li>
          <li class="divider"></li>
          <li id="refundPaymentAction"><a tabindex="0">Rembourser</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

bootstrap 子菜单出现故障

Glitch with bootstrap submenu

twitter-bootstrap

bootstrap-table