组合垂直/内联字段的自举复杂表单布局 [英] Bootstrap complex form layout for combined vertical/inline fields

问题描述

我对Bootstrap非常陌生，但在我的技能上也快速增长，并对此表示赞赏。我需要构建一个相当复杂的页面，该页面将包含很多表单元素，包括多个地址填充组件。我在这里附上了我所瞄准的基本设计的图像，并且似乎无法用我可用的基本形式设计元素来实现它。我觉得我的方法会变得失控，因为我的嵌套层次太多，对实际做的事情没有足够的了解。所以，不要发布迄今为止的代码，任何人都可以给我一个关于我的设计如何实现的简单例子吗？

//i.stack.imgur.com/PdJOy.pngalt =在这里输入图片描述>

我的虚线矩形表示我的页面应该有两列显示，其中大部分表格元素都偏离较宽的RH侧。然后，在该专栏中，我的表单有一些额外的复杂性。我还没有在这里展示很多额外的表单元素，这就是我想要这样设计的主要原因 - 因为我需要尽可能地在垂直屏幕上保留空间。

感谢您的帮助。 http://getbootstrap.com/css/#grid 。

来自我的简单样本。希望这会帮助你理解这个概念。

 < div class =row> 
< div class =col-md-8> 
< div class =row> 
< div class =col-md-3> 
实验室左侧
< / div> 
< div class =col-md-9> 
表格的右边
< div class =row> 
< div class =col-md-12> 
加长表格
< / div> 
< / div> 
< div class =row> 
< div class =col-md-3> 
缩短格式
< / div> 
< div class =col-md-3> 
缩短格式
< / div> 
< div class =col-md-3> 
缩短格式
< / div> 
< div class =col-md-3> 
缩短格式
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
右面板，包含说明
< / div> 
< / div> 
  

I'm very new to Bootstrap but growing fast in my skill and also appreciation for it. I have a need to build a fairly complex page that will contain a lot of form elements, including multiple address fill-in components. I've attached here an image of the basic design that I am aiming for, and can't seem to achieve it with the basic form design elements available to me. I feel like my approach is getting "out of control" in the sense that I've got too many nesting levels and not enough understanding of what I'm actually doing. So rather than post the code I've got so far, can anyone give me a simplified example of how my design might be achieved?

My dotted-line rectangles represent the fact that my page should have a two-column display, with most of the form elements off to the wider RH side. And then, within that column, my form has some additional levels of complexity. There are many additional form elements that I'm not even showing here, and that's my main reason for wanting to design it this way--because I need to save on vertical screen real estate as much as possible.

Thanks for your help.

解决方案

You should use http://getbootstrap.com/css/#grid for this.

A simple sample from me. Hope this will help you understand the concept.

<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>

这篇关于组合垂直/内联字段的自举复杂表单布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！