Bootstrap 搜索表单布局答案

【问题标题】：Bootstrap Search Form LayoutBootstrap 搜索表单布局
【发布时间】：2016-12-07 01:25:53
【问题描述】：

我无法让 Bootstrap 呈现一个简单的全角搜索输入，并且按钮右对齐。这是我的代码：

<div class="row">
    <div class="col-md-12">
        <form class="form-inline">
            <input type="search" class="form-control" id="search" placeholder="I wish this would work...">
            <button type="button" class="btn btn-primary">Search</button>
        </form>
    </div>
</div>

所有这些都包含在 container 中。

【问题讨论】：

Bootstrap full-width text-input within inline-form的可能重复

标签： twitter-bootstrap

【解决方案1】：

你可以试试：

<div class="container">
  <form class="form-inline row">
    <div class="col-xs-8">
      <input type="search" class="form-control" id="search" placeholder="I wish this would work...">
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-primary btn-block">Search</button>
    </div>
  </form>
</div>

这是一个完整的例子：https://jsfiddle.net/v8rm9nx4/3/

【讨论】：

【解决方案2】：

将pull-right 添加到您的课程字符串中

class="btn btn-primary pull-right"

【讨论】：