twitter-bootstrap – Bootstrap 3 input-append升级

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap 3 input-append升级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
升级到Bootstrap 3,但我只是不知道如何升级我的旧输入附加。

我有这样的事情:

  1. <div class="input-append">
  2. <select>
  3. <option>hi</option>
  4. <option>hi2</option>
  5. </select>
  6. <span class="input-group-addon"></span>
  7. <input type="submit" class="btn" value="valami">
  8. </div>

预览:http://bootply.com/75910

在Bootstrap 3,这是最接近我可以得到

  1. <div class="input-group">
  2. <select class="form-control">
  3. <option>hi</option>
  4. <option>hi2</option>
  5. </select>
  6. <span class="input-group-addon"></span>
  7. <input type="submit" class="form-control btn btn-default" value="valami">
  8. </div>

预览:http://bootply.com/75912

如果我删除那个跨度,它是完美的,但他们在不同的线。

任何想法如何正确做到这一点?

解决方法

这是记录 herehere

Remove input-prepend and input-append for singular .input-group. The classes
have changed for the elements within,and require a bit more markup to use
buttons:

  • Use .input-group as the parent class around the input and addon.
  • For text based prepends/appends,use .input-group-addon instead of .addon.
  • For button prepends/appends,
    use .input-group-btn and place your .btn within that element.

例:

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-sm-3 col-xs-12 col-lg-3">
  4. <form class="form-search">
  5. <div class="input-group">
  6. <input type="text" class="form-control " placeholder="Text input">
  7. <span class="input-group-btn">
  8. <button type="submit" class="btn btn-search">Search</button>
  9. </span>
  10. </div>
  11. </form>
  12. </div>
  13. </div>
  14. </div>

编辑:从@kviktor和@ max4ever的工作示例:

http://bootply.com/75917

http://bootply.com/78014

猜你在找的Bootstrap相关文章