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

【问题标题】：Twitter's Bootstrap - create a form with 2 columnsTwitter 的 Bootstrap - 创建一个包含 2 列的表单
【发布时间】：2012-05-04 08:18:40
【问题描述】：

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

【问题讨论】：

从概念上讲，这对我来说似乎很简单。你试过嘲笑一些东西吗？你可以使用jsfiddle.net来帮助你。
我想说，就像您创建两列布局一样。这不是因为你现在想要它在一个表单中，而是创建起来有什么不同。
另一个好资源是infotuts.com/…

标签： html css twitter-bootstrap

【解决方案1】：

将表单标签包裹在您的跨度 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>

【讨论】：

这是一个不错的方法
如果您有多个字段集怎么办？我尝试将行放在字段集中。它有点工作，但有一些小的视觉问题，比如似乎缺少输入元素的填充。
您是否尝试调整窗口宽度？两列以一种不漂亮的方式相互竞争。
我实际上发现这在流畅的布局中效果不佳。由于某种原因，当您缩小屏幕尺寸时，文本字段会重叠。它发生在第二个跨度环绕到下面的一行之前。
你可以为此添加一个 jsfiddle 吗？

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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>

【讨论】：

有个小错误，Bootstrap 3中的“row-fluid”类已经被“row”替换了：getbootstrap.com/migration/#classes
事实，谢谢 Erowlin！我将在这里更新代码。 :D

【解决方案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>

【讨论】：

我使用了这段代码及其工作。它使用 twitter bootstrap 在表单中显示为两列...试试这个，希望对您有所帮助。
它“看起来”很漂亮，但我认为大多数使用引导程序进行布局的人都希望避免使用表格，以便布局在大量设备（例如手机、平板电脑、桌面等）但我自己还在学习引导程序，所以我知道什么。 :)
@BradMoore 可能是因为使用表格进行设计是不好的做法。表格用于显示 TABULAR DATA，不用于布局。
@nahum 好点。我不知道我发那篇文章时在想什么：P
但是如果表单数据在概念上类似于表格呢？假设我有 10 个输入字段，每个字段需要 3 个日期（计划开始、计划完成、实际完成）。我想将其显示为 10 行，每行 3 个输入字段。那张桌子有什么问题？

【解决方案6】：

我用过这个，效果很好..它对引导程序有响应

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

【讨论】：

【解决方案7】：

我使用以下

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

【讨论】：