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

Question

我试着去理解bootstrap v2.3.2。 我想用divs制作这样的形式......

我用divs

完成了这段代码

<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'来输入和标记， '控制标签'，'控制'，它变成地狱：[我不明白如何正确地放置它们（

<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>