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

发布时间：2020-12-14 18:45:29 所属栏目：资源来源：网络整理

导读：我对Bootstrap很新,但我的技能发展很快,也很欣赏它.我需要构建一个相当复杂的页面,其中包含许多表单元素,包括多个地址填充组件.我附上了一份我想要的基本设计图片,似乎无法用我可用的基本表单设计元素来实现它.我觉得我的方法变得“失控”,因为我的嵌套水平

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

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

谢谢你的帮助.

解决方法

你应该使用 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!