1

新しいブログ プロジェクトに Twitter ブートストラップを使用しようとしていますが、検索ボックスを機能させようとしています。この目的のために、次のコードを使用しています。

<div class="row">
    <div class="span8 offset2">
        <form class="well form-search">
            <input type="text" class="input-xxlarge search-query">
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
    </div>
</div>

ただし、これが行うのは、検索ボックスの横に「検索ボタン」を配置することです。これは、私が望んでいるものではありません。ボックスの下部に2つのボタンがあり、ボックスの「中央」に配置された、Googleのランディングページに似た外観にしたいと思います。さまざまなオプション (別の div など) を試しましたが、これを達成できません。

次に、Google のランディング ページのように、行をオフセットして、可能であればページの中央に (ボックスと 2 つのボタンを) 揃えたいと思います。繰り返しますが、行をオフセットする方法を理解するのに苦労しています(ただし、列をオフセットすることはできます)。

これに関するガイダンスをいただければ幸いです。御時間ありがとうございます。

4

1 に答える 1

-1

Twitter Bootstrap は、クラスを介して HTML にスタイルを適用するだけです。独自の CSS を使用してコンテンツのスタイルを設定することもできます。私は以下のソリューションをテストしていないので、そのままですぐに動作するとは思わないでください (ただし、動作する場合はお知らせください)。私は、すべてのステップで達成しようとしていることのアイデアを提供するために、広範囲にコメントしました.

div > div:only-child > form:only-child > button[type="submit"] {
  /* clear any floating implemented by the Twitter Bootstrap framework; you may
     want to use the legacy clearfix method to make this work on all browsers */
  clear: both;

  /* redeclare the button as a block element */
  display: block;

  /* set a width (less than the width of its container; in this case, form).
     this would help with centering the button */
  width: 45%;

  /* center the button. You can use a button group if you have more buttons */
  margin: 0 auto;

  /* center the text in the button, assuming it's not already centered by twitter */
  text-align: center;
}

ps: ばかげたセレクターで申し訳ありません。Twitter のものではない明示的なクラス名や ID タグはありませんでした。

于 2012-07-20T05:02:00.777 に答える