使用Twitter Bootstrap对齐按钮

Question

我正在尝试让对齐在Bootstrap中正常工作。我一直在看http://getbootstrap.com/css/#type-emphasis，我也试过http://getbootstrap.com/components/#navbar-component-alignment，但我无法达到我想到的效果。

这是我正在使用的代码：

<h1>{% trans %} x {% endtrans %} <small>{% trans %} yw {% endtrans %}</small></h1>

<input class="form-control" type="text">
<button type="button" class="btn btn-primary custom-button-width">{{ icon('plus') }} {% trans %} z1 {% endtrans %}</button>
<button type="button" class="btn btn-warning custom-button-width .navbar-right">{{ icon('edit') }} {% trans %} z2 {% endtrans %}</button>
<button type="button" class="btn btn-danger custom-button-width .navbar-right">{{ icon('remove') }} {% trans %} z3 {% endtrans %}</button>

<br />
<br />

<table class="table table-hover">
...

下面是一个实际看起来如何的例子，以及我想要实现的目标。

感谢任何想法 - 谢谢。

Answer 1

Skelly是正确的，但如果可能的话，我更喜欢用twitter bootstrap内置功能来解决这些问题。右拉助手类在这里非常重要：

浮动帮助程序类文档：http://getbootstrap.com/css/#helper-classes-floats

我经常使用的另一个twbs3功能是网格系统：

网格系统文档：http://getbootstrap.com/css/#grid

两者都可以达到这个目的：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
        </div>
        <div class="col-md-6 col-sm-6 clearfix">
            <div class="pull-right">
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
            </div>
        </div>
    </div>
</div>

这是jsfiddle：http://jsfiddle.net/kY2cb/1/

Answer 2

由于您正在使用custom-button-width类，因此您还可以使用.custom-input-width类来设置输入的宽度。然后创建2列并右对齐右侧按钮...

.custom-input-width {
    width:150px;
    margin-right:3px;
}

演示：http://bootply.com/ldT3sINLlz