HTML页面布局 - 多个表单标签

Question

我有一个twitter-bootstrap＆amp; thymeleaf项目，我需要有两个表单标签覆盖页面的各个部分，如下所示：

黑匣子代表的区域包含两个文本区域和一个提交按钮。用户可以在textbox1中键入文本并点击提交。他们键入的文本在textbox2中显示为date + time + user + commentstring。同时它保存在数据库中。 textbox2用于保存多个注释，每个注释都以日期时间和用户为前缀。

红色框表示的区域是表单的其余部分 - 当点击主提交按钮时，它会有几个字段发送到后端。

我理解标签必须在它们打开的元素内关闭。鉴于此约束 - 我是否可以使用引导网格布局覆盖红色区域的表单标记。欢迎以非布局为中心的解决方案。

由于

更新1

这是一个更好地展示的小提琴：

Layout example https://jsfiddle.net/0an6vwdq/8/

两个大文本框和提交注释按钮是区域1.其余是区域2.

更新2

小提琴有第二组表格标签，从第24行开始，在第54行结束 - 正确的日期选择器之后 - 表格标签提前关闭，错过了页面底部的动态列表。

我必须提前关闭它们，因为引导网格系统和开始标记在一行内。

所以问题仍然是如何使用引导网格系统维护此布局，但是第二个表单标记覆盖了页面的剩余部分。

Answer 1

只需在第一个表单元素上使用float: left;。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<form class="small">

</form>

<form class="big">

</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不是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>