如何使用引导程序 2.3.2 设计两列表单，其中第二列占用其余空间答案

【问题标题】：how to design a two column form using bootstrap 2.3.2 where the 2nd column takes up the rest space如何使用引导程序 2.3.2 设计两列表单，其中第二列占用其余空间
【发布时间】：2014-04-08 20:23:36
【问题描述】：

我想使用 Bootstrap V2.3.2 设计一个两列的水平表格。以下是html：

<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
    <label for="inputAppName" class="control-label col-xs-2">Application Name&nbsp;  </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description&nbsp;</label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>

我发现第二列的 input-text 和 textarea 的宽度更小。我想扩展它们以占用其余空间。我尝试使用“输入块级”类，但输入文本和文本区域将不会与标签位于同一行。

谁能帮忙？

提前致谢！

【问题讨论】：

标签： forms twitter-bootstrap twitter-bootstrap-2 column-width

【解决方案1】：

试试这个

<form>

    <div class="row">

        <div class="col-xs-6">

          <div class="input-group">

            <span class="input-group-addon">

              <input type="checkbox">

            </span>

            <input type="text" class="form-control">

          </div>

        </div>

        <div class="col-xs-6">

          <div class="input-group">

            <span class="input-group-addon">

              <input type="radio">

            </span>

            <input type="text" class="form-control">

          </div>

        </div>

      </div>

</form>

【讨论】：

【解决方案2】：

首先要做的是不要使用Bootstrap 3类...

改用Bootstrap 2... 将col-xx-[1-12] 替换为span[1-12]

您在 span11 中输入的代码：

http://www.bootply.com/119374

<div id="content" class="row-fluid">
    <div class="span12 main">
        <h2>Product Data</h2>
      <form class="form-horizontal">
        <fieldset>
          <div class="form-group row-fluid">
            <label for="inputAppName" class="control-label span2">Application Name&nbsp;  </label>
            <div class="span10">
              <input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
            </div>
          </div>
          <div style="height:10px;">
          </div>
          <div class="form-group row-fluid">
            <label for="inputAppDesc" class="control-label span2">Description&nbsp;</label>
            <div class="span10">
              <textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
</div>

【讨论】：

我不知道 col-xx-[1-12] 是 Bootstrap3 的类。这个答案真的很有帮助。