如何使用bootstrap设计一个双列表格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> 

我发现第二列的输入文本和textarea的宽度较小。我想扩大他们占据休息空间。我尝试使用“输入块级”类，但输入文本和textarea不会与标签位于同一行。

任何人都可以帮忙吗？

在此先感谢！

Answer 1

要做的第一件事就是不要使用Bootstrap 3类...

通过span[1-12]

你的代码输入span11尝试Bootstrap 2而不是...更换col-xx-[1-12]：

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>