Bootstrap 搜索框和按钮与标题文本右侧对齐（不在导航栏中）

Question

我正在使用 Bootstrap 3.3.7，在小屏幕上查看时，很难将搜索框和按钮放在标题文本下方。

我想让它堆叠如下：

大屏幕（目前是这样）：

[Title] [search input] [submit button]

较小的屏幕：

[Title]
[search input] [submit button]

小屏幕：

[Title]
[search input]
[submit button]

非常感谢任何帮助。我已经在这方面工作了很长时间，我的 CSS 技能太缺乏了，无法取得任何体面的进展。谢谢。

大屏幕：

较小的屏幕（按钮被切断）：

小屏幕：

这是我的代码：

<nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <!-- all the navigation stuff -->
    </div>
</nav>

<!-- main content -->
<div class="container" role="main">

    <div class="page-header">

        <form action="" method="GET" class="form-inline pull-right">

            <div class="form-group form-group-lg has-feedback">

                <label class="sr-only" for="search">Search</label>
                <input type="text" class="form-control" name="q" id="search" placeholder="Search">

                <span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>

            </div>

            <button type="submit" class="btn btn-lg btn-success">
            <span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
            </button>

        </form>

        <h2>Quite Long Header Text</h2>

    </div>

<!--rest of page content -->

</div>

更新

谢谢@ Robert C。这就是你的建议的样子：

和

和

按钮的尺寸缩小了，这很好，但输入字段现在跨越了整个宽度。我认为如果小按钮和输入字段在同一行，一切都会很好。这意味着即使在小型设备上我也只需要两个堆栈。

您能否建议我如何减小输入框的大小，以便它允许按钮在同一“行”上粘在其左侧？

非常感谢

Answer 1

您将需要添加一些包装器以确保所有内容都对齐（或者删除 上的填充<h2>），但以下内容应该为您提供 Bootstrap Grid 解决方案：

<div class="container" role="main">
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <h2>Quite Long Header Text</h2>
        </div>

        <div class="col-md-4 col-sm-4 col-xs-12">

            <form action="" method="GET" class="form-main">

            <div class="col-md-10 col-sm-10 col-xs-12">
                <label class="sr-only" for="search">Search</label>
                <div class="input-group">
                    <input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
                    <span class="input-group-addon group-icon"><span class="glyphicon glyphicon-user"></span>
                </div>
            </div>

            <div class="col-md-2 col-sm-2 col-xs-12">
                <button type="submit" class="btn btn-success">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="hidden-sm hidden-xs"> Search </span>
                </button>
            </div>

        </div>      

    </div>
</div>

您可以在这里看到 Bootply 小提琴：http ://www.bootply.com/bhvdBwcX4b

要在较小的屏幕上查看 Bootply fiddle，请务必单击移动图标，因为简单地调整浏览器大小将导致渲染错误警告。