html - Unable to display inline forms with bootstrap CSS -

i started using bootstrap css setting form designing.

the form has 3 top level settings, radio1 (y or n), topsettings (which has 3 sub-settings: enable, textbox1, textbox2) , mediadir (textbox). trying align these 3 top level labels on left, , align 3 sub-settings of topsettings on right.

before bootstrap, able achieve these using hard-coded html tables.

(in image: top - wanted, , achieved hard-coded tables in html. bottom - looks bootstrap)

<form name="serversetting">     <fieldset> <legend> <b>settings</b> </legend>         <div>            <table class="code">                     <tr>              <td class="padded"> radio1= </td>             <td class="padded"> <input type="radio" name="radio1" value="y">y                 <input type="radio" name="radio1" value="n">n  </td>             </tr>              <tr>              <td class="padded"> topsettings=</td>             <td class="padded">                 <table class="code"  cellspacing = "0" cellpadding = "0">                 <tr>                 <td>enabled= </td>                 <td> <input type="radio" name="enabled" value="y">y                 <input type="radio" name="enabled" value="n">n ; </td>                 </tr>                  <tr>                 <td>texbox1=</td>                  <td><input type="number" name="textbox1" value=40>;</td>                 </tr>                  <tr><td>textbox2=</td>                 <td><input type="number" name="textbox2" value=640>;</td>                 </tr>                 </table>               </td>             </tr>              <tr>             <td class="padded">mediadir= </td>             <td class="padded"><input type="text" name="mediadir" value="/data/media">;</td>             </tr>           </table>           </div>           </fieldset>      </form>  

however when switched bootstrap, inline property of 3 sub-settings has lost. did add "inline" class div , enable radio displayed inline, textbox1 , textbox2 not.

   <form class="form-horizontal" name="serversetting">       <fieldset> <legend> <b>settings</b> </legend>         <div class="control-group code">           <label class="control-label code" for="xcode">radio1=</label>           <div class="controls">             <input type="radio" name="radio1" value="y">y             <input type="radio" name="radio1" value="n">n           </div>         </div>          <div class="control-group code">           <label class="control-label code" for="topsettings">topsettings=</label>            <div class="controls form-inline">             <label class="inline" for="topsettings">enabled= </label>              <input class="code" type="radio" name="enabled" value="y">y             <input class="code" type="radio" name="enabled" value="n">n           </div>            <div class="controls form-inline">             <label>textbox1e=</label>             <input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40>           </div>            <div class="controls form-inline">             <label for="textbox2">textbox2=</label>             <input type="number" name="textbox2" placeholder=640>           </div>         </div>          <div class="control-group code">           <label class="control-label code" for="mediadir">mediadir=</label>           <div class="controls">             <input type="number" name="mediadir" placeholder="/data/meida/">           </div>         </div>         </fieldset>     </form>  

i opening html in firefox. (i tried chrome, displayed inline not align.) know how achieve display above picture?

edit: css file:

div{ max-width:550px; } .code { font-family: "courier new", courier, monospace; }      input{ } .code { font-family: "courier new", courier, monospace; }   label.code { font-family: "courier new", courier, monospace; } 

here working version of code on fiddle.

what causing problem:

when using bootstrap horizontal forms remember structure should follows:

<form class="form-horizontal">     <div class="control-group">         <label class="control-label" for="inputemail">email</label>         <div class="controls">              <input type="text" id="inputemail" placeholder="email">         </div>     </div> </form> 

so in case should nest "sub-settings" in single div class="controls": 1 after "topsettings=" label block. logical of "sub-settings" form one nested block control corresponding label "topsettings=".

then, there no need use form-inline: notice nested block (the "sub-settings" group) nothing else nested instance of form-horizontal. since properties of form-horizontal inherited parent form, there no need repeat oneself. instead, should wrap each of three "sub-settings" in control-group div in turn contain label , control.

here revised code:

<div class="control-group code">     <label class="control-label code">topsettings=</label>      <div class="controls">         <div class="control-group code">             <label class="control-label">enabled= </label>             <div class="controls">                 <input class="code" type="radio" name="enabled" value="y"/>y                 <input class="code" type="radio" name="enabled" value="n"/>n             </div>         </div>          <div class="control-group code">             <label class="control-label">textbox1=</label>             <div class="controls">                 <input type="number" name="textbox1e" onblur="if(this.value=='') this.value = 40" placeholder=40 />             </div>         </div>          <div class="control-group code">             <label class="control-label">textbox2=</label>             <div class="controls">                 <input type="number" name="textbox2" placeholder=640 />             </div>         </div>     </div> </div> 

edit

to align sub-controls can add following custom 2 classes css:

.form-horizontal .control-label.subcontrol-label{     width: auto; }  .form-horizontal .controls.subcontrols{     margin-left: 80px;    } 

and use them accordingly sub-settings labels e.g.

<label class="control-label subcontrol-label">

and controls div e.g.

<div class="controls subcontrols">.

you can find updated version of demo here.