HTMLページのレイアウト - 複数のフォームタグ

Question

私はTwitterのブートストラップIは、以下に示すように、ページのそれぞれの部分をカバーする2個のフォームのタグを持っている必要があり& thymeleafプロジェクトがあります。

示される領域をブラックボックスには、2つのテキスト領域と送信ボタンがあります。ユーザーはtextbox1にテキストを入力してsubmitを押すことができます。それらが入力したテキストは、textbox2にdate + time + user + commentstringとして表示されます。同時に、データベースに保存されます。 textbox2には、それぞれに接頭辞dateとuserが付いた複数のコメントを保持します。

赤いボックスで表される領域はフォームの残りの部分です。メインの送信ボタンがクリックされたときにバックエンドに送信されるいくつかのフィールドがあります。

私は、開いている要素内でタグを閉じる必要があることを理解しています。この制約があると、ブートストラップグリッドレイアウトを使用して赤い領域をカバーするフォームタグを使用できますか？非レイアウト中心のソリューションは大歓迎です。

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

二つの大きなテキストボックスとノート送信ボタンをエリア1：

おかげ

UPDATEここで1

は良く実証するフィドルです。残りは面積2です。

右の期日ピッカー後 - -

UPDATE 2

フィドルは、フォームタグの第二セットは、24行目から始まり、54行に閉じているフォームタグには、早期閉鎖との一番下に動的リストを欠場しますページ。

ブートストラップグリッドシステムと開始タグが行内にあるため、私は早期に閉じなければなりませんでした。

したがって、このレイアウトをブートストラップグリッドシステムで維持する方法はまだありますが、2番目のフォームタグでページの残りの部分をカバーする方法があります。

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

Answer 2

私は、ブートストラップには専門家でない、しかし、あなたはこれを試してください。

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