Question

我很欣赏新的Bootstrap 3但...... 我创建了一个包含5列的表。最后3列包含2 x＆＃39; a href＆＃39;和1 x＆＃39;形式＆＃39;但每个人都可以使用尺寸为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，否则您可能会遇到重叠问题。

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

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

2 个答案: