Twitter的Bootstrap - 创建一个包含2列的表单

时间:2012-05-04 08:18:41

标签: html css twitter-bootstrap

是否可以使用twitter bootstrap创建两列表单? 他们在这里有一些很好的例子: http://twitter.github.com/bootstrap/base-css.html 但不幸的是,他们都使用了一个专栏。

7 个答案:

答案 0 :(得分:50)

将表单标记包裹在span div中。这对我有用,但你可能需要稍微调整一下:

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

答案 1 :(得分:10)

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

答案 2 :(得分:9)

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>

答案 3 :(得分:1)

使用Bootstrap3的示例两列

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

我使用了它并且效果很好..它对bootstrap的反应

 <div class="row-fluid">
   <div class="span12">
    <form action="" class="form-horizontal" name="user_account_add" id="user_account_add" method="post">
      <div class="span12">
        <div class="well clearfix">
         <fieldset>
          <div class="span5">
           <legend>Business Info</legend>
            <input type="hidden" name="action"  value="save" />
             <div class="control-group">
               <label class="control-label">Business Name:  </label>
               <div class="controls">
                <input type="text" class="input-xlarge"  name="business_name"  id="business_name">
               </div>
             </div>
             <legend>Owner Info</legend>
             <div class="control-group">
               <label class="control-label">Firstname: </label>
               <div class="controls">
                <input type="text" class="input-xlarge" name="fname" id="owners_name">
               </div>
             </div>
             <div class="control-group">
              <label class="control-label">Lastname: </label>
              <div class="controls">
               <input type="text" class="input-xlarge" name="Lname" id="owners_name">
              </div>
             </div>
         </div>
         <div class="span7">
          <legend>Business Operation Location</legend>
          <div class="control-group">
           <label class="control-label">Street Address</label>
           <div class="controls">
             <input type="text" class="input-xlarge"  name="address" id="address" >
           </div>
          </div>
          <div class="control-group">
           <label class="control-label">City</label>
           <div class="controls">
            <input type="text" class="span3"  name="city" id="city">
           </div>
          </div>
          <div class="control-group">
            <label class="control-label">State</label>
            <div class="controls">
             <input type="text" class="span3"  name="state" id="state">
            </div>
          </div>
          <div class="control-group">
           <label class="control-label">Zip</label>
           <div class="controls">
            <input type="text" class="span3"  name="zip" id="zip">
           </div>
          </div>
        </div>
        </fieldset>
                <button class="btn btn-primary">Submit</button>
                <button class="btn">Clear</button>
              </div>
             </div>
         </form>
     </div>
  </div>

答案 6 :(得分:0)

我使用以下

  <form class="no-margin" >
      <fieldset>
          <div class="form-group no-margin">
              <div class="row-fluid">
                  <div class="form-group col-sm-6 no-margin"> Input 1 <div>
                  <div class="form-group col-sm-6 no-margin"> Input 2 <div>
              </div>
          </div>
      <fieldset>
  </form>