Bootstrap搜索框和按鈕與標題文本右側對齊（不在導航欄中）

Question

我使用Bootstrap 3.3.7，並且在小屏幕上查看時難以讓搜索框和按鈕放在標題文本下方。

我希望得到它的堆棧，如下所示：

大屏幕（因爲它是目前）：

[Title] [search input] [submit button] 

較小的屏幕：

[Title] 
[search input] [submit button] 

小屏幕：

[Title] 
[search input] 
[submit button] 

任何hel非常感謝。我一直都在這個問題上，我的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> 

更新

謝謝@羅伯特C.這事情怎麼看你的建議：

和

和

的按鈕的尺寸是很大的降低，但輸入字段現在橫跨整個寬度。我認爲如果小按鈕和輸入字段在同一行中，它們都可以正常工作。這意味着即使在小型設備上，我也只需要兩個堆棧。

你能建議我怎麼去減小輸入框的大小，以便它允許按鈕在同一'行'上粘到它的左側？

非常感謝

Answer 1

您將需要添加一些包裝，以確保一切都排隊了（或者，或者刪除你的填充<h2>），但如此大致如下mething應該爲您提供引導電網解決方案：

<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

我的頭，你需要使用山口和行去解決它的頂部。這裏是列表的一部分...

<!-- 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; 
    } 
} 

享受:)