2016-05-20 10 views
0

私はブートストラップ3を使用しています。サブメニュー付きのボタングループを表示しようとしています。 は、私が正常に動作メニューサブメニューが正しく表示されない

http://jsfiddle.net/L8kbaqw3/

<div 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 tabindex="0">Annuler</a></li> 
      <li><a tabindex="0">Sauvegarder</a></li> 
      <li class="divider"></li> 
      <li class="dropdown-submenu"> 
       <a tabindex="0">Payer</a> 

       <ul class="dropdown-menu"> 
        <li><a tabindex="0">Comptant</a></li> 
        <li><a tabindex="0">Débit</a></li> 
        <li><a tabindex="0">Carte de crédit</a></li> 
        <li><a tabindex="0">Carte cadeaux</a></li> 
        <li><a tabindex="0">Chèque</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

を作成

ブートストラップ・サブメニューを使用します。

が、私はそれの下に何かを追加しようとすると、私はすべてのメニューが http://jsfiddle.net/hxnznnz6/

それはcompletlyメニューを表示するために何かブロックのように見えるています表示されません。次の2つのボタンのレイアウトを比較する場合

はまた、

違うの編集 @Eduardoアルーダピメンテルが言ったように私は、最初のBTN-グループを削除しました。

は大丈夫に見えますが、私はそれ

submenu

新しい結果 http://jsfiddle.net/wn9u5z28/

答えて

1

1)ブートストラップ3は、使いやすさを理由に、マルチレベルドロップダウンのためのサポートを削除をクリックすると、支払人のサブメニューが表示されません。原因としての問題。あなたはこれらの二つのリンクで見ることができるように:

Bootstrap 3 dropdown sub menu missing

Responsive multilevel menu with Bootstrap 3

2)異なるレイアウトの理由は、コードが異なることです。それを解決するために、単に再コーディングおよびライン3のこの部分を削除:

class="btn-group" 
+0

メニューがcorectly表示されていないが、私は私が私の仕事で、再びテスト問題 –

+0

を表示画像を投稿しました。メニューが正しく表示されています。どのブラウザを使用していますか? –

+0

firefox、すなわちchrome ...支払人の項目をクリックすると...画像のように何も表示されません。 –

関連する問題