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

Question

我很欣赏新的 Bootstrap 3，但是......我创建了一个包含 5 列的表。最后 3 列包含 2 x 'a href' 和 1 x 'form' 但每个人都作为一个大小为 30 x 30 的按钮。表单是最大的问题，因为它是 block 元素，我希望所有按钮在一行中彼此相邻。

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

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

这很好用。但我想将这 3 个对象对齐在我的单元格右侧。我找不到正确对齐它的方法。

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

之后您将只需要一个带有 clearfix 类的 div，否则您可能会遇到重叠问题。

bootstrap 文档中关于在下拉菜单中使用 pull-right 类的注释:

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

PS - 除了显示数据外，不要将表格用于任何其他用途。那种网页设计应该留在1998年:P