Bootstrap 3输入附加升级

时间:2013-08-21 12:57:48

标签: twitter-bootstrap twitter-bootstrap-3

我正在升级到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

如果我移除那个跨度它会变得完美,但它们在不同的行中。

知道如何正确地做到这一点吗?

1 个答案:

答案 0 :(得分:81)

记录在案herehere

  

删除单数.input-group的input-prepend和input-append。课程   已更改内部元素,并需要更多标记才能使用   按钮:

     
      
  • 使用.input-group作为输入和插件周围的父类。
  •   
  • 对于基于文本的前置/附加,请使用.input-group-addon代替.addon
  •   
  • 对于按钮预置/附加,      使用.input-group-btn并将.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