组合垂直/内联字段的引导复合表单布局

Question

我对Bootstrap非常陌生，但是我的技术发展很快，我也很欣赏它。我需要构建一个相当复杂的页面，它将包含许多表单元素，包括多个地址填充组件。我在这里附上了一个我想要的基本设计的图像，并且似乎无法用我可以使用的基本形式设计元素来实现它。我觉得我的方法正变得“失控”，因为我有太多的嵌套水平，对我实际上正在做的事情没有足够的理解。所以，与其发布到目前为止的代码，还有人能给我一个简单的例子来说明我的设计是如何实现的吗？

​

​

我的虚线矩形代表了这样一个事实:我的页面应该有一个两列的显示，大多数表单元素被移到更宽的RH边。然后，在那一栏中，我的表单有一些额外的复杂性。还有许多额外的表单元素，我在这里甚至没有展示，这也是我想要这样设计的主要原因--因为我需要尽可能多地保存垂直屏幕上的房地产。

谢谢你的帮助。

Answer 1

为此，您应该使用http://getbootstrap.com/css/#grid。

我的一个简单的样本。希望这能帮助你理解这个概念。

<div class="row">
  <div class="col-md-8">
    <div class="row">
        <div class="col-md-3">
            Left side for labes
        </div>
        <div class="col-md-9">
            Right side for forms
            <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 panel with instructions
  </div>
</div>

Answer 2

某些类型的形式是复杂的，有和没有靴带。您的表单没有完整的开箱即用解决方案。您将结合自定义CSS并使用嵌套。“最简单”的方法是做每一块，缩进，评论等等。非常注重细节。

这是表单映像中比较烦人的部分的一个例子，它是第二列中的三个嵌套列。我调整了与此类似的所有表单，以使用嵌套的.form组(它的作用类似于.row)中的百分比槽，因为30 as排水沟太大了。了解网格系统，而不仅仅是使用它，将帮助您更多地摆脱引导。

​

​

演示：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 }
}

<div class="container">
   <form class="form-horizontal form-custom">
      <!-- BEGIN form-group line-1 -->
      <div class="form-group">
         <label class="col-sm-4 control-label">Words Go Here</label>
         <div class="col-sm-8">
            <div class="input-group">
               <span class="input-group-addon" id="sizing-addon2">Line 1</span>
               <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
            </div>
         </div>
         <!-- /.col-sm-8 -->
      </div>
      <!-- /.form-group -->
      <!-- END form-group line-1 -->
      <!-- BEGIN form-group city-state-zip -->
      <div class="form-group">
         <div class="col-sm-8 col-sm-offset-4">
            <div class="form-group">
               <!-- acts as .row -->
               <div class="col-sm-5">
                  <div class="input-group">
                     <span class="input-group-addon" id="sizing-addon2">City</span>
                     <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-sm-5 (nested) -->
               <div class="col-sm-3">
                  <div class="input-group">
                     <span class="input-group-addon" id="sizing-addon2">State</span>
                     <input type="text" class="form-control" placeholder="State" aria-describedby="sizing-addon2">
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-sm-3 (nested) -->
               <div class="col-sm-4">
                  <div class="input-group">
                     <span class="input-group-addon" id="sizing-addon2">Zip</span>
                     <input type="text" class="form-control" placeholder="Zip" aria-describedby="sizing-addon2">
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-sm-4 (nested) -->
            </div>
            <!-- /.form-group (nested) -->
         </div>
         <!-- /.col-sm-8 .col-sm-offset-4 -->
      </div>
      <!-- /.form-group -->
      <!-- END form-group city-state-zip -->
      <div class="form-group">
         <div class="col-sm-offset-4 col-sm-8">
            <button type="submit" class="btn btn-default">Button</button>
         </div>
         <!-- /col-sm-offset-4.col-sm-8 -->
      </div>
      <!-- /.form-group -->
   </form>
</div> <!-- /.container -->

Answer 3

您应该查看引导水平窗体：http://getbootstrap.com/css/#forms-horizontal

下面是一个使用引导横向表单的演示：http://jsfiddle.net/swm53ran/31/ (这个演示还展示了引导的响应能力)

本质上，您希望将引导网格系统与引导横向窗体结合起来。

<div class="col-xs-8">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email"/>
      </div>
    </div>
  </form>
</div>
<div class="col-xs-4">
    Some other Elements and Instruction Goes Here
</div> 

希望这能帮上忙！