更新

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网格解决方案：

<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小提琴，请务必点击移动图标，因为只需调整浏览器大小就会出现渲染错误警告。

Answer 2

在我的头顶，你需要使用col和行来解决它。这是col部分...

<!-- main content -->

<div class="col-lg-6 col-md-6 col-sml-12">
  <h2>Quite Long Header Text</h2>

</div>

<div class="col-lg-6 col-md-6 col-sml-12">

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

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

</div>

Answer 3

我已针对您的问题重新构建了我之前的解决方案。看看这里的示例CODEPEN。

希望它对您有所帮助

HTML：

 <nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container">
    <!-- all the navigation stuff -->
  </div>
</nav>

<!-- main content -->
<div class="section-main">
  <div class="container" role="main">
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <h2>Quite Long Header Text</h2>
      </div>
      <div class="col-xs-12 col-md-6">
        <form action="" method="GET" class="form-main  form-inline nofloat-xs pull-right pull-left-sm">

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

            <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>
              </span>
            </div>

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


          </div>


        </form>
      </div>
    </div>


    <!--rest of page content -->

  </div>
</div>

CSS：

.form-main {
  margin-top: 15px;
}

.form-input-fields {
 margin-bottom: 0; 
}

.section-main {
  margin-top:40px;
  background-color: lightgrey;
  padding: 20px 0;
}
.group-icon {
  background-color:#fff;
  border:0; 
}
.input-search {
  border:1px solid #fff;
  box-shadow:none;  
}
@media (max-width: 992px) {
    .pull-left-sm {
        float: left !important;
    }

}
@media (max-width: 767px) {
    .nofloat-xs {
        float: none !important;
    }
  .btn-submit {
    margin-top:10px;
  }
}

享受：）

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

更新

3 个答案: