1

Google スタイルの検索バーを中央に配置した単純なインデックス ページを作成しようとしていますが、Twitter Bootstrap で見栄えを良くするのに苦労しています。

検索バーには、検索フィールドの最後 (右側) に追加された検索アイコン ボタンが必要です。ドロップダウン検索提案システムのコーディングを計画しているため、先行入力を使用しました。

<div class="hero-unit">
<div class="input-append">
  <input type="text" data-provider="typeahead" class="input-large"
  placeholder="What do you want to know?" autocomplete="off">
  <button type="submit" class="btn-large btn-success">
    <i class="icon-search"></i> 
  </button>
</div>

また、標準のテキスト ボックスよりも大きく (高く) する必要があります。これは、Twitter Bootstrap の安定版リリースではまだ利用できない機能であるため、CSS をページの上部に配置する必要がありました。

<style>
 input[class=input-large] {
    width: 540px;
    height: 24px;
    margin-bottom: 10px;
    margin-right: -7px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
  }

検索ボタンを検索バーに近づける (btn-large を使用するとギャップが生じる) 唯一の方法は、負のマージンを使用することでした。私が誇りに思っていることではありません。とても乱雑に見えます。

これについてのガイダンスをいただければ幸いです。前もって感謝します。

4

2 に答える 2

1 
<div class='container'>
    <div class='row'>
        <form>
        <div class='span3 input-append' style="margin-top:30%; margin-left:30%">
            <input class="span2" style="height:26px;width:400px;" id="main_search" type="text" >
            <input class="btn btn-large btn-primary"  type="button" value="search">
        </div>

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

フィドル-

更新されたフィドル

于 2013-03-20T15:49:51.263 に答える
1

拡張フォーム コントロールを試すことができます

<div class="input-append">
    <span class="add-on"><input id="search-button" value="Search"></span>
    <!-- stick a search icon in there instead -->
    <input class="span2" id="search">
</div>

ただし、これを行う場合はボタンの CSS (パディング、アウトライン) を調整する必要がありますが、モバイル ビューではそれらは 1 つの単位として残ります。カスタム ビューが本当に必要な場合は、とにかくマージンを下げたはずです。

于 2013-03-20T15:50:48.540 に答える