html - 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' 就变成了 hell :[我不明白如何正确地将它们放在那里(

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