如何在Bootstrap表单中创建输入字段和按钮填充整行？

Question

我正在尝试使Post按钮向右移动,并且标签的文本字段填充以下Bootstrap 3表单中行的整个左侧部分:

这是整个表单的标记:

<form>
  <div class="form-group">
    <textarea class="form-control" id="entry" placeholder="Write something in Markdown..." rows="3"></textarea>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <input class="form-control input-sm" id="tags" placeholder="tag1, tag2, tag3...">
    </div>
    <div class="col-sm-3">
      <button class="btn btn-primary btn-sm" type="submit">Post</button>
    </div>
  </div>
</form>

我承认自己并不了解Bootstrap网格系统(或一般的CSS),以便完成这项工作 - 你能帮助我吗？

Answer 1

你可以这样做:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Post</button>
  </span>
</div>

您可以在此处找到更多示例:http://getbootstrap.com/components/#input-groups-buttons

Answer 2

您可以在“发布”按钮中使用该类.btn-block，使其跨越列的整个宽度。就你而言，.col-sm-3.

<div class="col-sm-3 text-right"> 
    <button class="btn btn-primary btn-sm btn-block" type="submit">Post</button>
</div>

在这里你可以看到它。请注意，我将.col-sm-*类替换为.col-xs-*类，因此您可以直接看到它。

<div class="col-sm-3 text-right"> 
    <button class="btn btn-primary btn-sm btn-block" type="submit">Post</button>
</div>