结合HTML的垂直/内联字段的Bootstrap复杂表单布局

垂直/内联字段组合的Bootstrap形式-

<div class="row">
   <div class="col-md-8">
      <div class="row">
         <div class="col-md-3">
            Left side
         </div>
         <div class="col-md-9">
            Right side
            <div class="row">
               <div class="col-md-12">
                  longer forms
               </div>
            </div>
            <div class="row">
               <div class="col-md-3">
                  shorter forms
               </div>
               <div class="col-md-3">
                  shorter forms
               </div>
               <div class="col-md-3">
                  shorter forms
               </div>
               <div class="col-md-3">
                  shorter forms
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-4">
      Right
   </div>
</div>