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

我对 Bootstrap 很陌生，但我的技能增长很快，也很欣赏它。我需要构建一个相当复杂的页面，其中包含大量表单元素，包括多个地址填写组件。我在这里附上了我想要的基本设计的图像，但似乎无法使用我可用的基本表单设计元素来实现它。我觉得我的方法正在“失控”，因为我有太多的嵌套级别，并且对我实际在做什么没有足够的理解。因此，除了发布我到目前为止得到的代码之外，任何人都可以给我一个如何实现我的设计的简化示例吗？

我的虚线矩形表示我的页面应该有两列显示，大多数表单元素位于较宽的右侧。然后，在该列中，我的表单具有一些额外的复杂性。还有许多其他表单元素我什至没有在此处显示，这就是我想要以这种方式设计它的主要原因 - 因为我需要尽可能节省垂直屏幕空间。

感谢您的帮助。

你应该使用http://getbootstrap.com/css/#grid 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>