html - 如何使用 Bootstrap 2.3.1 对齐这两行？

Question

我在使用 Bootstrap 2.3.2 设置表单控件样式时遇到以下问题

我在一个面板中有两行。每行分为两个跨度。每个跨度都有一个表单。 显然，这些行彼此半相似，但它们没有对齐。 有什么方法可以使它们与覆盖 Bootstrap 的整个样式保持一致吗？

<div class="container-fluid">
    <div class="panel panel-info">
        <div class="panel-heading">
            Summary Report
        </div>
        <div class="row-fluid">
            <div class="span4">
                <div class="form-inline">
                    <label>Weekly Total</label>
                     <input type="text" value="22MM" />
                </div>
            </div>
            <div class="span8">
                <div class="form-inline">
                    <label>Days' Total</label>
                     <input type="text" value="111" class="input-mini" />
                     <input type="text" value="111" class="input-mini" />
                     <input type="text" value="111" class="input-mini" />
                     <input type="text" value="111" class="input-mini" />
                     <input type="text" value="111" class="input-mini" />
                     <input type="text" value="111" class="input-mini" />
                     <input type="text" value="111" class="input-mini" />
                </div>
            </div>
        </div>
        <div class="row-fluid top-buffer">
            <div class="span4">
                <div class="form-inline">
                    <label>Monthly Per Total</label>
                     <input type="text" value="33MM" />
                </div>
            </div>
            <div class="span8">
                <div class="form-inline text-center">
                    <label>Monthly Total</label>
                    <input type="text" value="111" class="input-mini" />
                    <input type="text" value="111" class="input-mini" />
                    <input type="text" value="111" class="input-mini" />
                    <input type="text" value="111" class="input-mini" />
                    <input type="text" value="111" class="input-mini" />
                    <input type="text" value="111" class="input-mini" />
                    <input type="text" value="111" class="input-mini" />
                </div>
            </div>
        </div>
    </div>
</div>

这是我目前所获得内容的快照:

Answer 1

我只是将标签和输入与 spanX 类隔开，并根据需要对齐标签(text-left，text-right 等)，以便将其应用于您的原始代码:

<div class="container-fluid">
<div class="panel panel-info">
    <div class="panel-heading">
        Summary Report
    </div>
    <div class="row-fluid">
        <div class="span4">
            <div class="form-inline">
                <label class="span4 text-right">Weekly Total</label>
                <input class="span8" type="text" value="22MM" />
            </div>
        </div>
        <div class="span8">
            <div class="form-inline">
                <label class="span4 text-right">Days' Total</label>
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
            </div>
        </div>
    </div>

    <div class="row-fluid top-buffer">
        <div class="span4">
            <div class="form-inline">
                <label  class="span4 text-right">Monthly Per Total</label>
                <input  class="span8" type="text" value="33MM" />
            </div>
        </div>
        <div class="span8">
            <div class="form-inline ">
                <label class="span4 text-right">Monthly Total</label>
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
                <input type="text" value="111" class="input-mini span1" />
            </div>
        </div>
    </div>
</div>
</div>