Bootstrap,表,居中按钮
问题描述:
我有一个表格,我想在其中放置一个下拉按钮。我不能居中按钮,我尝试了很多东西。有没有办法做到这一点?Bootstrap,表,居中按钮
<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"/> Option1</a></li>
<li><a href="#" class="small" data-value="Option2" tabIndex="-1"><input type="checkbox"/> Option2</a></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
答
只是删除col-md-3 text-left
和按钮的父DIV添加text-center
。检查以下更新片段...
<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"/> Option1</a></li>
<li><a href="#" class="small" data-value="Option2" tabIndex="-1"><input type="checkbox"/> Option2</a></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
非常感谢,Dream_Cap。我看到它向右移动了一点,但没有居中。我如何直接在“Test”文本下面找到它? –
我更新了帖子。对于那个很抱歉。谢谢。 –
繁荣,谢谢! –