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

【问题标题】：HTML page layout - multiple form tagsHTML 页面布局 - 多个表单标签
【发布时间】：2017-05-12 10:57:37
【问题描述】：

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

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

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

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

谢谢

更新 1

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

Layout examplehttps://jsfiddle.net/0an6vwdq/8/

两个大文本框和提交备注按钮是区域1，其余的是区域2。

更新 2

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

由于引导网格系统和开始标签在一行内，我不得不提前关闭它们。

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

【问题讨论】：

将第一个表单向左浮动。
这是一个奇怪的布局。您不能使用一种形式和样式来满足您的需求吗？然后用js判断提交的时候发送什么？或者正如@MrLister 所说....
@Gezzasa 这并不像简单地拥有两个表单那么简单。稍后想想代码维护者！亲吻！
您希望第二个表单在第一个表单旁边还是在第一个表单下的块中的新行上开始？
@AlGrant 您在询问涉及 HTML、CSS 和 Bootstrap 的布局的特定方面，所以我认为您向我们提供包含 HTML、CSS 和 Bootstrap 的 minimal reproducible example 是公平的。

标签： html css twitter-bootstrap thymeleaf

【解决方案1】：

只需在第一个表单元素上使用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>

【讨论】：

你能用引导网格布局证明这个答案吗？
只需将这段 CSS 添加到其中或与我们分享您的代码。
使用小提琴服务还是在这里发帖？平时有什么？
我会创建一个小提琴并编辑帖子并添加链接。
但是如果你看看我的小提琴，我必须关闭页面底部之前的第二个表单标签，因为它在一行 div 中打开。

【解决方案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>

【讨论】：