は、ブートストラップドロップダウンの代わりに、

Question

Aは、一般的にブートストラップのドロップダウンアンカーのボタンを使用することができます

ドロップダウンの項目は、アンカータグです

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    </ul> 
</div> 

としてマークアップされています。

ドロップダウンアイテムがではなく、でなくページ上の一部の機能を実行するという点で、ドロップダウンアイテムがbuttonのように動作する必要がある場合があります。

レンダリングの方法を壊さずに次のことを行うためのデフォルトのサポートはありますか？私は別のクラスを使うべきですか？または、.dropdown-menu > li > aに適用されているスタイルを複製して、それを.dropdown-menu > li > buttonスタイルに適用するだけですか？

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><button class="btn btn-default">Another action</button></li> 
    </ul> 

私はpreventDefault()を実行するためにアンカータグを変更することができます知っていますが、それは間違っているタグのように思えるし、またそれがナビゲートしたかのように、ブラウザにURLを表示するようになります。ボタンはこのように動作しません。

Answer 1

ボタンがドロップダウン内で正しくスタイルされる組み込みの方法が見つからないうちに、明示的にスタイルを一致させるように設定しました。私のCSSファイルに以下を追加しました。

.dropdown-menu { 

    > li > button { 
     display: block; 
     border: 0; 
     border-radius: 0; 
     padding: 3px 20px; 
     clear: both; 
     font-weight: normal; 
     line-height: 1.42857143; 
     color: #333; 
     white-space: nowrap; 
    } 

} 

.dropdown-menu > li > button { 
    &:hover, 
    &:focus { 
     text-decoration: none; 
     color: #262626; 
     background-color: #f5f5f5; 
    } 
}