html - Bootstrap：如何使输入框和按钮保持在同一行？

Question

我正在帮助建立一个网站并在学习过程中学习所有这些技能。我看到了类似的问题，但没有找到有用的解决方案。

您可以在此屏幕截图的右上角看到搜索框和按钮拒绝位于同一行。 http://i.imgur.com/fiurnYs.png

搜索框的 HTML 代码如下所示：

    <div class="col-sm-3 col-md-3 pull-right">
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search"         name="srch-term" id="srch-term">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="icon-search"> </i></button>
        </div>
        </div>
        </form>
        </div>

CSS 代码如下所示： https ://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css

Answer 1

您可以使用文档中提供的代码块作为代码的基线。

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

http://getbootstrap.com/2.3.2/base-css.html#forms （搜索Buttons instead of text）