ブートストラップ、テーブル、センタリングボタン

私はドロップダウンボタンを押したいテーブルがあります。私はボタンを中央に置くことができず、私は多くのことを試しました。これを行う方法はありますか？ブートストラップ、テーブル、センタリングボタン

<table class = "table table-hover table-condensed"> 
<tr> 
    <th class = "text-center"> 
    Test 
    </th> 
</tr> 
<tr> 
    <td> 
    <div class="col-md-3 text-left"> 
     <div class="button-group"> 
     <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
      <li><a href="#" class="small" data-value="Option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option1</a></li> 
      <li><a href="#" class="small" data-value="Option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option2</a></li> 
      </ul> 
     </div> 
    </div> 
    </td> 
</tr> 
</table>

出典

2017-10-05 Neil Aggarwal

このdivには「text center」というクラスを入れます。ここでseeにcodepenさ：

<div class="button-group text-center">

また、単にcol-md-3 text-leftを削除すると、ボタンの親のdivにtext-centerを追加含むDIVのクラスから

出典

2017-10-05 03:17:14

おかげで、Dream_Capを更新スニペットを確認してください。私はそれが右に少し動くが、その中心にないことを見る。どのようにして "Test"テキストのすぐ下に取得できますか？ –

投稿を更新しました。申し訳ありません。ありがとう。 –

ブーム、ありがとう！ –

をCOL-MD-3およびテキストの左を奪う取ります。 ...以下の非常に

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="http://code.jquery.com/jquery-3.1.1.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<table class = "table table-hover table-condensed"> 
 
     <tr> 
 
      <th class = "text-center"> 
 
      Test 
 
      </th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <div class="text-center"> 
 
       <div class="button-group"> 
 
       <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#" class="small" data-value="Option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option1</a></li> 
 
         <li><a href="#" class="small" data-value="Option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option2</a></li> 
 
        </ul> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </table>

出典

2017-10-05 03:20:14

ブートストラップ、テーブル、センタリングボタン

答えて

関連する問題