我有一个twitter-bootstrap& thymeleaf项目,我需要有两个表单标签覆盖页面的各个部分,如下所示:
黑匣子代表的区域包含两个文本区域和一个提交按钮。用户可以在textbox1中键入文本并点击提交。他们键入的文本在textbox2中显示为date + time + user + commentstring。同时它保存在数据库中。 textbox2用于保存多个注释,每个注释都以日期时间和用户为前缀。
红色框表示的区域是表单的其余部分 - 当点击主提交按钮时,它会有几个字段发送到后端。
我理解标签必须在它们打开的元素内关闭。鉴于此约束 - 我是否可以使用引导网格布局覆盖红色区域的表单标记。欢迎以非布局为中心的解决方案。
由于
更新1
这是一个更好地展示的小提琴:
Layout example
https://jsfiddle.net/0an6vwdq/8/
两个大文本框和提交注释按钮是区域1.其余是区域2.
更新2
小提琴有第二组表格标签,从第24行开始,在第54行结束 - 正确的日期选择器之后 - 表格标签提前关闭,错过了页面底部的动态列表。
我必须提前关闭它们,因为引导网格系统和开始标记在一行内。
所以问题仍然是如何使用引导网格系统维护此布局,但是第二个表单标记覆盖了页面的剩余部分。
答案 0 :(得分:2)
只需在第一个表单元素上使用float: left;
。
.small {
float: left;
width: 100px;
height: 100px;
background: red;
border-right: 10px solid white;
border-bottom: 10px solid white;
}
.big {
width: 100%;
height: 300px;
background: blue;
}

<form class="small">
</form>
<form class="big">
</form>
&#13;
答案 1 :(得分:0)
我不是bootstrap的专家,但是你可以试试这个。
<form id="plan" class="form-horizontal" method="post" action="#" th:Action="@{/plan}" th:object="${file}">
<div class="col-xs-3" style="background-color: lightgray">
</div></form>
而不是这个。
<div class="col-xs-3" style="background-color: lightgray">
<form id="plan" class="form-horizontal" method="post" action="#" th:Action="@{/plan}" th:object="${file}">
</form</div>