2つの要素を互いに正確に下にします。

Question

次のhtmlコードにあります。現在、ラベルとテキストエリアは同じ行に私は正確にtextareaの左隅下の送信ボタンを置くしようとしていますされているが、私のアイデアは動作しないようです：

<div class="form-group"> 
    <label for="comments" class="col-sm-3 control-label text-right">Comments</label> 
    <div class="col-sm-6"> 
     <textarea id="summernote" th:field="*{comments}" class="summernote ">   
     </textarea> 
    </div> 
</div> 

<div class="form-group col-sm-6" style="float: right;"> 
    <div class="col-sm-4" style="float: left;"> 
     <input type="submit" value="Submit The Feedback" class="btn btn-primary" /> 
    </div> 
    </div> 

私はそれを修正する必要がありますどのように？私が使用しています

ブートストラップ

Answer 1

<div class="form-group"> 
    <label for="comments" class="col-sm-3 control-label text-right">Comments</label> 
    <div class="col-sm-9"> 
    <textarea id="summernote" th:field="*{comments}" class="summernote "></textarea> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-9" style="float: left;"> 
    <input type="submit" value="Submit The Feedback" class="btn btn-primary" /> 
    </div> 
</div> 

シンプル！

Answer 2

ボタンを備えた外側のdiv（form-group col-sm-6）のスタイルfloat: right;を削除してください、それはあなたがcol-sm-3を持っているので、あなたがfloatを削除する必要がありますcomments labelため

Answer 3

を仕事と設定する必要がありますcol-sm-offset-3のオフセット：ここ

<div class="form-group"> 
    <label for="comments" class="col-sm-3 control-label text-right">Comments</label> 
    <div class="col-sm-6"> 
    <textarea id="summernote" th:field="*{comments}" class="summernote "></textarea> 
    </div> 
</div> 

<div class="form-group col-sm-offset-3 col-sm-6"> 
    <div class="col-sm-4" style="float: left;"> 
    <input type="submit" value="Submit The Feedback" class="btn btn-primary" /> 
    </div> 
</div> 

はあなたのコードとスナップショットをテストするbootplyです：

さらにcheck this outは、より良いブートストラップ付きグリッド構造を理解します。

Answer 4

ないあなただけのスタイルを削除してテキストエリアの後にボタンを入れ、やろうとしたのかわから：ちょうど

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="form-group"> 
 
    <label for="comments" class="col-sm-3 control-label text-right">Comments</label> 
 
    <div class="col-sm-6"> 
 
    <textarea id="summernote" th:field="*{comments}" class="summernote "> 
 
    </textarea> 
 
    <div> 
 
     <input type="submit" value="Submit The Feedback" class="btn btn-primary" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

下のリンクで行くか、コードの下にしようと、それかもしれあなたを助けることができる -

JSFiddle

HTMLコード

<div class="form-group"> 
    <label for="comments" class="col-sm-3 control-label text-right">Comments</label> 
    <div class="col-sm-6"> 
     <textarea id="summernote" th:field="*{comments}" class="summernote "> 
     </textarea> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-sm-4"> 
     <input type="submit" value="Submit The Feedback" class="btn btn-primary" /> 
    </div> 
</div>