我正在使用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.这就是你的建议：

和

和

按钮尺寸减小很好,但输入字段现在跨越整个宽度.我认为如果小按钮和输入字段在同一行中,它们都可以正常工作.这意味着即使在小型设备上,我也只需要两个堆栈.

您能否建议我如何减小输入框的大小,以便按钮在同一“行”上粘贴到左侧？

非常感谢

最佳答案 您需要添加一些包装器以确保所有内容都排成一行(或者,删除< h2>上的填充),但以下内容应该为您提供Bootstrap网格解决方案：

<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小提琴,请务必单击移动图标,因为只需调整浏览器大小将导致呈现错误警告.