グリッチ

Question

私は、ブートストラップのテーブルを持っている3、bootstrap tableとbootstrap submenu

ブートストラップを使用します。その上に、サブメニュー付きのボタンがあります。 ボタンで、私はいくつかの不具合があります。

奇妙なことに、Annuler、Payer、Comptant、Rembourserのマウスオーバーでしか動作しません。 また、Payerの下の行が始まります。

デバッグしようとしましたが、解決策が見つかりました。

私はここ https://jsfiddle.net/y0pqux38/

<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

ブートストラップサブメニューでグリッチが原因pull-rightの起こる例があります。それをすべてのサブメニューliから削除すると、すべて正常に動作します。

あなたはpull-right

チェックデモHERE

HTMLの代わりにtext-rightクラスright aligned使用するサブメニュー李項目にしたい場合：

<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>