forms - 如何使用引导程序 2.3.2 设计两列形式，其中第二列占用其余空间

Question

我想使用 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>

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

任何人都可以帮忙吗？

提前致谢！

Answer 1

首先要做的是不要使用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>

Answer 2

尝试这个

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