47

Bootstrap 3 にアップグレードしていますが、古い入力追加をアップグレードする方法がわかりません。

私はこのようなものを持っていました:

<div class="input-append">
  <select>
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="btn" value="valami">
</div>

プレビュー: http://bootply.com/75910

Bootstrap 3では、これが私が得ることができる最も近いものです

<div class="input-group">
  <select class="form-control">
    <option>hi</option>
    <option>hi2</option>
  </select>
  <span class="input-group-addon"></span>
  <input type="submit" class="form-control btn btn-default" value="valami">
</div>

プレビュー: http://bootply.com/75912

そのスパンを削除すると完璧になりますが、それらは別の行にあります。

これを適切に行う方法はありますか？

4

1 に答える 1

85

これはこことここに文書化されています：

singular の input-prepend と input-append を削除します.input-group。内部の要素のクラスが変更され、ボタンを使用するにはもう少しマークアップが必要です。

  • .input-group入力とアドオンの親クラスとして使用します。
  • テキストベースのプリペンド/アペンドには、.input-group-addon代わりに を使用し.addonます。
  • ボタンの先頭/末尾に追加するには、その要素内に.input-group-btnyour を使用して配置します。.btn

例： 

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-xs-12 col-lg-3">
      <form class="form-search">
          <div class="input-group">
              <input type="text" class="form-control " placeholder="Text input">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-search">Search</button>
              </span>
          </div>
      </form>
    </div>
  </div>
</div>

編集: @kviktor と @max4ever からの実例:

http://bootply.com/75917

http://bootply.com/78014

于 2013-08-21T13:09:16.290 に答える