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

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

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

不推荐使用.pull-right alignment

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

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

Answer 2

看看这是否能解决您的目的。 我在你现有的代码中添加了一些css

<style type="text/css">
    .btn-group{ 
        display: inline-block;        
        text-align:right;
  }  
  </style>

HTML与您的相同

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