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

你可以这样做：

＆＃13;

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

＆＃13;

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

Answer 2

伙计，自举系统使用12网格系统，试试这个：

＆＃13;

<div class="input-group">
      <input type="text" class="form-control" placeholder="tag1, tag2, tag3...">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Post</button>
      </span>
</div>

＆＃13;

https://getbootstrap.com/examples/grid/

Answer 3

您可以使用“发布”按钮中的.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-*类，因此您可以直接看到它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<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-xs-9">
            <input class="form-control input-sm" id="tags" placeholder="tag1, tag2, tag3...">
        </div>
        <div class="col-xs-3 text-right">
            <button class="btn btn-primary btn-sm btn-block" type="submit">Post</button>
        </div>
    </div>
</form>

Answer 4

将.myclassname td { background: azuros; background: -webkit-linear-gradient(-90deg, #00FFFF, #ffffff); ... }类添加到form-control元素将使其填充其容器。

btn

默认情况下，文本字段会填充其容器。

Answer 5

<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 text-right">
      <button class="btn btn-primary btn-sm" type="submit">Post</button>
    </div>
  </div>
</form>

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

5 个答案: