Question

在下表中，我有两行。在第一行，第二个单元格中，我有两个按钮。如何使用 Twitter Bootstrap 使这些按钮正确对齐如果缩小表格，按钮不应叠加在一起。他们应该始终并肩。

[     ] [[button1] [button2]           ]
[     ] [                              ]

示例：http://www.bootply.com/MycjXnp9wp。按钮应在单元格中右对齐尝试失败：http://www.bootply.com/4hkmjHCCOq

这显示了我期待的输出。 http://www.bootply.com/tYzdIu13M8我宁愿使用引导方式而不是嵌套表技术。

Answer 1

为了正确对齐按钮，bootstrap为我们提供了.pull-right classe：

    <td class="col">
      <div class="pull-right"><a href="test.html" class="btn btn-primary btn-block">Go here</a></div>
      <div class="pull-right"><a href="test.html" class="btn btn-primary btn-block">Go here</a></div>
    </td>

我们应该在.col类上使用display:inline-flex;来使两个按钮始终对齐，即使缩小了表格。

.col{
    display:inline-flex;
    float:right;
}

这里是JSFiddle

表单元格使用引导程序对齐内容

1 个答案: