twitter-bootstrap – Bootstrap 3 input-append升级

发布时间：2020-12-17 23:58:10 所属栏目：安全来源：网络整理

导读：我升级到Bootstrap 3，但我只是不知道如何升级我的旧输入附加。我有这样的事情： div class="input-append" select optionhi/option optionhi2/option /select span class="input-group-addon"/span input type="submit" class="btn" value="valami"/div 预

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

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

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

解决方法

这是记录 here和 here：

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.

例：

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!