ブートストラップリストグループの動的ドロップダウン

Question

リストグループを作成しようとしていますが、リスト内の各アイテムにはドロップダウンメニューをトリガーするアイコンがあります。私はボタンにテキストを配置し、それが悪い位置を持っていない限り、ドロップダウンの位置を設定する方法、グリフコンも全く表示されないといういくつかの問題があります。

助けを
おかげで...また、私はJavaScriptで動的にドロップダウンを構築し、配置したいが、まず私が正しく位置である1を参照してくださいする必要があり、その後、私はすべてのJSのDOM作業を行います！

jsfiddle： https://jsfiddle.net/DTcHh/24900/

いくつかのコード：

<div class="container"> 
<div class="col-sm-4"> 
<ul class="list-group"> 
      <li class="list-group-item"> 
       <a href="#">option</a> 
      <div class="dropdown"> 
        <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        </ul> 
       </div></li> 
         <li class="list-group-item"> 
       <a href="#">option</a> 
      <div class="dropdown"> 
        <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        </ul> 
       </div></li> 
      </ul> 

</div> <!--.col-sm-4 -->   
<div class="col-sm-8"> 

</div> 
      </div> 

Answer 1

私はglyphiconsが含まCDNバージョンにブートストラップCSSのバージョンを更新しました。私はあなたが探していると信じているアイコンの隣にアンカー要素を移動しました。レイアウトの問題を引き起こしていたカスタムCSSも削除しました。

<div class="dropdown"> 
    <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
     <i class="glyphicon glyphicon-option-vertical"></i> 
     <a href="#">option</a> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
    </ul> 
</div> 

https://jsfiddle.net/DTcHh/24902/