5

我很欣赏新的 Bootstrap 3，但是……我创建了一个有 5 列的表。最后 3 列包含 2 x 'a href' 和 1 x 'form' 但每个人都作为一个大小为 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>

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

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

不要工作！

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

不要工作！

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

作品！

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

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

4

2 回答 2

3

使用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。导航栏中的右对齐导航组件使用此类的混合版本来自动对齐菜单。要覆盖它，请使用 .dropdown-menu-left。

PS - 除了显示数据之外，不要将表格用于任何事情。这种网页设计应该留在 1998 年：P

于 2015-07-22T02:33:56.673 回答
-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>
于 2015-07-22T03:08:51.163 回答