html - Bootstrap フォームのテキストと入力を 2 列に揃える

Question

ブートストラップ 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>