Bootstrap 3使用'btn-group'并对齐

Question

我很欣赏新的Bootstrap 3但是......我创建了一个包含5列的表格.最后3列包含2 x'a href'和1 x'形式',但每个人都作为一个大小为30 x 30的按钮工作.表单是最大的问题,因为它是一个块元素,我想要所有按钮旁边彼此在一条线上.

到目前为止我的解决方案:

<table>
 <tr>
  <td colspan="3">
   <div class="btn-toolbar">
    <div class="btn-group"> Link 1 </div>
    <div class="btn-group"> Link 2 </div>
    <div class="btn-group"> Form 1 </div>
   </div>

这非常有效.但我想在我的单元格右侧对齐这三个对象.我无法找到正确的对齐方式.

<div class="btn-toolbar text-right">

不要工作!

<tr colspan="3" class="text-right">

不要工作!

<div class="btn-toolbar pull-right">

作品!

但我真的不确定这是否是正确的方法.对我来说,这是很多嵌套的代码.

有没有办法用更少的代码来解决这个问题？

Answer 1

pull-right使用它来实现您所需要的并没有什么错。

<h2>Stock Management</h2>
<hr/>
<div class='btn-group pull-right'>
    <a href='#' class='btn btn-default'>Add New Product</a>
    <a href='#' class='btn btn-info'>Supplier List</a>
    <a href='#' class='btn btn-danger'>Stock Alerts</a>
</div>
<div class='clearfix'></div>
<hr/>

您只需要随后div的一类clearfix，否则您可能会遇到重叠的问题。

pull-right引导文档中有关在下拉菜单中使用该类的注释：

已弃用 .pull-right 对齐

从 v3.1.0 开始，我们已弃用下拉菜单上的 .pull-right。要右对齐菜单，请使用 .dropdown-menu-right。导航栏中的右对齐导航组件使用此类的 mixin 版本来自动对齐菜单。要覆盖它，请使用 .dropdown-menu-left。

PS - 除了显示数据之外，请勿使用表格进行任何其他用途。这种网页设计应该留在 1998 年:P