4

Bootstrap 3.0 で、[送信] ボタンの後に [検索ヘルプ] リンクがある Google スタイルの検索ボックスを作ろうとしています。

私の問題:レスポンシブになると、オフセットマージンが失われ、ボタンが次の行に折り返されます。

<div class="row search">
  <div class="col-md-8 col-md-offset-2">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="">Enter search terms</label>
        <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
        <input id="cn" name="cn" type="hidden" value="false" />
      </div>
      <button type="submit" id="s" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
      <a href="#">Search Help</a>
    </form>
  </div>
</div>

参照: http://jsfiddle.net/redo1134/su3eq/2/

>991pxですべて問題ありません。しかし、991 以下ではオフセットが失われます。

これは確か#media (min-width: 992px)に bootstrap.css のメディア クエリに関連していますが、オフセットを保持する方法がわかりません。

さらに悪いことに、ビューポートが <768px の場合、ボタンとリンクは次の行に折り返されます。

ここでも、bootstrap.css とメディア クエリに惹かれmin-width: 768pxますが、入力、ボタン、およびテキストをすべてまとめておく方法がわかりません。

ありがとう！

4

3 に答える 3

4 
<div class="row search">
  <div class="col-sm-8 col-sm-offset-2">
    <form role="form">
            <div class="input-group">
              <input type="text" class="form-control input-sm">
              <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
              </span>
                &nbsp;<a href="#">Search Help</a>
            </div>
    </form>
  </div>
</div>
于 2013-09-14T23:12:15.257 に答える
2

デモ: http://jsbin.com/IKaKosoX/1/

編集: http://jsbin.com/IKaKosoX/1/edit?html,css,output

form-inline をラップしている行 col を削除し、次の html に置き換えます。

        <!-- Global Search -->

            <form class="form-inline global-search" role="form">
                <div class="form-group">
                    <label class="sr-only" for="">Enter search terms</label>
                    <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
                    <input id="cn" name="cn" type="hidden" value="false" />
                </div>
                <button type="submit" id="s" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>

                </button> <a href="#">Search Help</a>

            </form>

フォームに関する以前のカスタム css を削除し、次のものに置き換えます。

/* center search */

   .global-search {
    text-align:center;
    padding:10px;
  }
   .global-search * {
    display:inline-block;
    margin-bottom:0;
  }

   .global-search .form-control {
      width:120px;
  }

   .global-search a {
    display:block;
    padding-top:10px;
  }



@media (min-width:400px){
   .global-search {
    padding: 20px 0;
    text-align:center;
    }

   .global-search .form-control {
    width:300px;
   }

}
于 2013-12-24T07:24:32.683 に答える