5

Twitter ブートストラップを使用してレイアウトを簡単に微調整しようとしていますが、「input-append」クラスを使用すると問題が発生します。答えは非常に単純だと思いますが、私はこれが初めてで、答えを見つけるのに非常に長い時間を費やしてきました。

テキスト入力、ボタン、および End Text div を同じ行に配置し、テキスト入力にボタンを追加します。

これが私のjsfiddleです：http://jsfiddle.net/kdavh/azF8w/2/

...ボタンの周りの div に注目してください:

<div class='span2'>
  <input class="btn btn-primary span2" type="submit" value="Search" />
</div>

に変更すると

<div class='span2 input-append'> ...

ボタンは正しい形状ですが、テキスト入力から分離されています

span2 を外して変更すると

<div class='input-append'> ...

次に、ボタンが正しく追加されますが、次の「テキストの終了」ブロックが次の行にプッシュされます。

私が試した他の順列はすべて割愛します。検索しましたが、実際の例が見つかりません。

誰でも助けることができますか？

4

2 に答える 2

2

以下のコードを試してください：

<div class='container'>
    <div class='row'>
        <form>
        <div class='span3 input-append'>
            <input class="span2" id="main_search" type="text" />
            <input class="btn btn-primary" type="button" value="Search" />
        </div>
        <div class='span2'>
            <a class='littleNote' href=''>End Text</a>
        </div>
        </form>
    </div>
</div>
于 2012-11-21T06:01:20.737 に答える
0

入力要素にボタンを追加するには、input-append (または -prepend) を使用する必要があります。そのような

  <div class="input-append">
    <input class="span2" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
  </div>

こちらのドキュメントの「フォームコントロールの拡張」にも示されています

ただし、追加されたボタンは入力コントロールに余分な幅を追加することに注意してください。つまり、div の span*-width を指定するときに考慮する必要があります。つまり、input-append div に、入力要素とボタンの両方を含めるのに十分な幅の span*-width を設定します。Adit は、彼の例で span3 を使用してこれを行いました。

于 2012-11-21T09:04:02.057 に答える