Bootstrap, Table, Bouton de centrage

J'ai une table, dans laquelle je veux mettre un bouton déroulant. Je ne peux pas centrer le bouton, et j'ai essayé beaucoup de choses. Y a-t-il un moyen de faire cela?Bootstrap, Table, Bouton de centrage

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

Source

2017-10-05 Neil Aggarwal

Mettez la classe "centre de texte" dans cette div. Voici codepen à see:

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

Prenez également emporter col-md-3 et le texte à gauche de la classe de la div contenant

Source

2017-10-05 03:17:14

Merci beaucoup, Dream_Cap. Je vois que ça bouge un peu vers la droite, mais ce n'est pas centré. Comment l'obtenir directement sous le texte "Test"? –

J'ai mis à jour le post. Désolé pour ça. Merci. –

Boom, merci! –

Il suffit de retirer col-md-3 text-left et ajoutez text-center sur div parent de bouton. vérifier extrait mis à jour ci-dessous ...

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

Source

2017-10-05 03:20:14

Bootstrap, Table, Bouton de centrage

Répondre

Questions connexes