html - Twitter の Bootstrap - 2 列のフォームを作成する

Question

Twitter ブートストラップで 2 列のフォームを作成することは可能ですか? ここにいくつかの良い例があります: http://twitter.github.com/bootstrap/base-css.html しかし、残念ながら、それらはすべて 1 つの列を使用しています。

Answer 1

Wrap the form tag around your span divs. This is working for me, but you might need to tweak things a bit:

<div class="row">
  <form class="form-horizontal">
    <div class="span6">
      <fieldset>
      <legend>Legend text</legend>
      <div class="control-group">
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input01">
          <p class="help-block">Supporting help text</p>
        </div>
      </div>
      </fieldset>
    </div>
    <div class="span6">
      <fieldset>
        <legend>Legend text</legend>
        <div class="control-group">
          <label class="control-label" for="input01">Text input</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="input01">
            <p class="help-block">Supporting help text</p>
          </div>
        </div>
      </fieldset>
    </div>
  </form>
</div>

Answer 2

<div class="row">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                <label>First Name</label>
                <input type="text" class="span12" placeholder="">
            </div>
            <div class="span6">
                <label>Last Name</label>
                <input type="text" class="span12" placeholder="Type something…">
            </div>
        </div>
    </div>
</div>

例: http://jsfiddle.net/JJnDg/460/

Answer 3

Bootstrap 3 の 2 列:

http://jsfiddle.net/52VtD/10419/

<div class="container">
    <div class="row">
        <form action="#">
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="firstname">Firstname</label>
                    <input type="text" class="form-control" id="firstname" placeholder="Firstname">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="example@domain.com">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="lastname">Last Name</label>
                    <input type="text" class="form-control" id="lastname" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
            </div>
        </form>
    </div>
</div>

Answer 4

Bootstrap3 を使用した 2 つの列の例

        <div class="row">
            <label>Date</label>
            <div class="row">
                <div class="col-xs-7" style=" padding: 0px 2px 2px 1px;">
                    <input type="date" class="form-control col-xs-12">
                </div>
                <div class="col-xs-5" style="padding: 0px 1px 2px 1px;">
                    <input type="time" class="form-control col-xs-12">
                </div>
            </div>
        </div>

Answer 5

<div class="row-fluid">
<form id="myForm" modelAttribute="mymodel">
    <div class="span12">
        <div class="well clearfix">
            <div class="span5">
                <legend>Text1</legend>          
                    <table width="100%" align="center">
                        <tr>
                            <td>
                                <label for="lable1">Label1 *</label>
                            </td>
                            <td>        
                                <input id="input1" class="input-xlarge"/>
                            </td>                       
                        </tr>           
                        <tr>
                            <td>
                                <label for="lable2">Label2 *</label>
                            </td>
                            <td>        
                                <input id="input2" class="input-xlarge"/>
                            </td>                       
                        </tr>
                        <tr>
                                <td colspan=2 align="center">
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                    <button class="btn" type="reset" id="resetButton">Reset</button>
                                </td>
                        </tr>
                    </table>
            </div>
            <div class="span5 offset1">
                <legend>Text2</legend>                 
            </div>
        </div>
    </div>
</form>