как создать форму из двух столбцов с помощью бутстрапа 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>