使2个元素正好在彼此之下

Question

在以下html代码中。目前标签和textarea位于相同的行我试图将提交按钮正好放在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>

我该如何解决？

我正在使用bootstrap

Answer 1

尝试使用按钮删除外部div（float: right;）的样式form-group col-sm-6，它应该可以正常工作

Answer 2

由于col-sm-3有comments label，您应删除float并设置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以更好地理解使用bootstrap的网格结构。

Answer 3

不确定你要做什么，只需删除样式并将按钮放在textarea之后：

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

使用以下链接或只是尝试以下代码可能它可以帮助您 -

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>

Answer 5

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

简单！