我很欣赏新的引导程序 3,但是......我创建了一个包含 5 列的表。最后 3 列包含 2 个"href"和 1 个"表单",但每个人都用作大小为 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">
工程!
但我真的不确定这是否是正确的方式。对我来说,它是很多嵌套代码。
有没有办法用更少的代码解决这个问题?
使用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
,否则您可能会遇到重叠的问题。
引导文档中有关在下拉菜单中使用 pull-right
类的说明:
已弃用的右拉对齐方式
从 v3.1.0 开始,我们在下拉菜单中弃用了 .pull-right。要右对齐菜单,请使用 .dropdown-menu-right。导航栏中右对齐的导航组件使用此类的 mixin 版本来自动对齐菜单。要覆盖它,请使用 .dropdown-menu-left。
PS - 除了显示数据外,不要将表格用于任何其他用途。这种网页设计应该在1998
看看这是否能解决你的目的。我在现有代码中添加了一些 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>