Bootstrap 表单文本和输入在 2 列中对齐

Question

我正在尝试理解 bootstrap v2.3.2。 我想使用 div 制作这样的表格...

我用 div 完成了这段代码

<form class="form-horizontal">
    <fieldset>

        <div class="row-fluid no-space">
            <div class="span3 blockkk">
                <p class="pull-right">1111111111111:</p>
            </div>
            <div class="span3 blockk ">
                <p class="pull-left">22222222</p>

            </div>
            <div class="span3 blockkk">
                <p class="pull-right">3333:</p></div>
            <div class="span3 blockk">
                <p class="pull-left">4444444444444</p></div>
        </div>
        <div class="row-fluid no-space">
            <div class="span3 blockkk">
                <p class="pull-right">1111111111111:</p>
            </div>
            <div class="span3 blockk ">
                <p class="pull-left">22222222</p>

            </div>
            <div class="span3 blockkk">
                <p class="pull-right">3333:</p></div>
            <div class="span3 blockk">
                <p class="pull-left">4444444444444</p></div>
        </div>
        </fieldset>
</form>

它看起来完全符合我的需要

现在我正在尝试使用 div 'control-group' 为输入和标签添加广告， 'control-label', 'controls' 它变成了地狱：[我不明白如何正确地将它们放在那里（

<form class="form-horizontal">
    <fieldset>

        <div class="row-fluid no-space">
            <div class="span6 ">
                <div class="control-group">
                    <div class="row-fluid">
                        <div class="span6 blockkk">
                             <div class="pull-right">
                                 <label class="control-label" for="textinput">Text Input</label>
                             </div>
                        </div>
                        <div class="span6 blockk">
                            <div class="pull-left">
                            <div class="controls">
                                <input id="textinput" name="textinput" placeholder="placeholder" class="input-small" type="text">
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6 blockk">
second row
            </div>
        </div>
    </fieldset>
</form>

试过这种方式，但代码很大，我找不到让这个输入向左移动的方法......无论如何。

如何正确解决这个问题？ 谢谢！

Answer 1

使用 Bootstrap3 尝试以下操作：

<form class="form-horizontal">
    <div class="row" style="padding-bottom : 10px">
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">Text:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">Text:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
    </div>
    <div class="row" style="padding-bottom : 10px">
        <div class="col-lg-2 col-lg-offset-1">
            <label class="control-label pull-right">Text another one:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
        <div class="col-lg-2 col-lg-offset-1">
            <label class="control-label pull-right">Text another one:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
    </div>
    <div class="row" style="padding-bottom : 10px">
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">And more:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">And more:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
    </div>

</form>

Answer 2

使用 v2.3.2，试试这个 - 根据需要编辑偏移量

<form class="form-horizontal">
        <div class="control-group row-fluid">
            <div class="span1 offset1">
                <label class="control-label pull-right" for="text">Text:</label>
            </div>
            <div class="controls span2" style="margin-left:80px">
                <input type="text" id="text">
            </div>
            <div class="control-group">
                <div class="span1 offset2">
                    <label class="control-label" for="text2">Text:</label>
                </div>
                <div class="controls span2" style="margin-left:80px">
                    <input type="text" id="text2">
                </div>
            </div>
        </div>
        <div class="control-group row-fluid">
            <div class="span1 offset1">
                <label class="control-label pull-right" for="textAnother">Text another one:</label>
            </div>
            <div class="controls span2" style="margin-left:80px">
                <input type="text" id="textAnother">
            </div>
            <div class="control-group">
                <div class="span1 offset2">
                    <label class="control-label" for="textAnother2">Text another one:</label>
                </div>
                <div class="controls span2" style="margin-left:80px">
                    <input type="text" id="textAnother2">
                </div>
            </div>
        </div>
            <div class="control-group row-fluid">
            <div class="span1 offset1">
                <label class="control-label pull-right" for="andMore">And more:</label>
            </div>
            <div class="controls span2" style="margin-left:80px">
                <input type="text" id="andMore">
            </div>
            <div class="control-group">
                <div class="span1 offset2">
                    <label class="control-label" for="andMore2">And more:</label>
                </div>
                <div class="controls span2" style="margin-left:80px">
                    <input type="text" id="andMore2">
                </div>
            </div>
        </div>
</form>