用于组合垂直/内联字段的Bootstrap复杂表单布局

我对Bootstrap很新,但我的技能发展很快,也很欣赏它.我需要构建一个相当复杂的页面,其中包含许多表单元素,包括多个地址填充组件.我附上了一份我想要的基本设计图片,似乎无法用我可用的基本表单设计元素来实现它.我觉得我的方法变得"失控",因为我的嵌套水平太多而且对我实际做的事情的理解还不够.所以,不是发布我到目前为止的代码,有人能给我一个简化的例子来说明我的设计是如何实现的吗？

我的虚线矩形表示我的页面应该有两列显示的事实,大多数表格元素都关闭到更宽的RH侧.然后,在该专栏中,我的表单有一些额外的复杂程度.还有许多额外的表单元素,我甚至没有在这里展示,这是我想要以这种方式设计它的主要原因 - 因为我需要尽可能地节省垂直屏幕空间.

谢谢你的帮助.

某些类型的表单在有和没有Bootstrap的情况下都很复杂.您的表单没有完整的开箱即用解决方案.您可以将Bootstrap与自定义CSS结合使用并使用嵌套."最简单"的方法是执行每个块,缩进,注释等.非常注重细节.

这是您拥有的表单图像中更烦人的部分的示例,它是第二列中的三个嵌套列.我调整所有与此类似的形式,以便在嵌套的.form-group(其作用类似于.row)中使用百分比装订线,因为30px的装订线太大了.理解网格系统,而不仅仅是使用它,将帮助您从Bootstrap中获得更多.

演示:https://jsbin.com/sejemi

CSS:

/* ---- text-align right the .control-label until 699px MAX width -----*/
@media (max-width:767px) { 
    .form-custom .control-label { text-align: right }
}

@media (max-width:699px) { 
    .form-custom .control-label {
        width: 100%;
        text-align: left;
    }
    .form-custom .payment-inputs { width: 100% }
    .form-custom .submit-form { margin-left: 0 }
}


/* ----------- adjusted nested columns grid and gutters ----------- */
.form-custom .form-group [class*="col-"] .form-group [class*="col-"] {
    padding-left: 1%;
    padding-right: 1%;
}
.form-custom .form-group [class*="col-"] .form-group {
    margin-left: -1%;
    margin-right: -1%;
}
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 5px }

@media (min-width:768px) { 
    .form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 0 }
}

HTML

   
      
      

         Words Go Here
         

            

               Line 1
               
            
         
         
      
      
      
      
      

         

            

               
               

                  

                     City
                     
                  
                  
               
               
               

                  

                     State
                     
                  
                  
               
               
               

                  

                     Zip
                     
                  
                  
               
               
            
            
         
         
      
      
      
      

         

            Button
         
         
      
      
   
 

你应该使用http://getbootstrap.com/css/#grid.

一个简单的样本来自我.希望这能帮助您理解这个概念.

  

    

        

            Left side for labes
        
        

            Right side for forms
            

                

                    longer forms
                
            
            

                

                    shorter forms
                
                

                    shorter forms
                
                

                    shorter forms
                
                

                    shorter forms
                
            
        
    
  
  

    Right panel with instructions