ブートストラップの検索ボックスとボタンがヘッダーテキストの右に揃えられています（ナビゲーションバーではありません）

Question

私はブートストラップ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. @ありがとう

および

ボタンが大きく、小型化が、入力フィールドは今幅全体にわたっています。小さなボタンと入力フィールドが同じ行にあれば、すべてうまくいくと思います。これは、小さなデバイスでも2つのスタックしか必要ないということを意味します。

入力ボックスのサイズを縮小して、同じ '行'の左側にボタンを固定できるようにする方法を提案してください。あなたはそれを動作するようにCOLと行を使用する必要が私の頭の上の

どうもありがとう

Answer 1

あなたが確認するために、いくつかのラッパーを追加する必要がありますすべてが並んでいます（または、代わりにあなたの<h2>のパッドを削除します）。 http://www.bootply.com/bhvdBwcX4b

単に、モバイルのアイコンをクリックしてください小さな画面上のBootplyフィドルを表示するには：

<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フィドルを見ることができます：以下沿っmethingすることはあなたのブートストラップ・グリッド・ソリューションを提供する必要がありますブラウザのサイズを変更すると、レンダリングエラーの警告が表示されます。

Answer 2

。ここに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; 
    } 
} 

が楽しむ:)