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>

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

有人可以帮忙吗？

提前致谢！

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>

如何使用bootstrap 2.3.2设计两列形式，其中第二列占用剩余空间

2 个答案: