twitter-bootstrap Bootstrap 3 输入追加升级

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18358083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:02:58  来源:igfitidea点击:

Bootstrap 3 input-append upgrade

twitter-bootstraptwitter-bootstrap-3

提问by kviktor

I'm upgrading to Bootstrap 3, but I just can't figure out how to upgrade my old input-appends.

我正在升级到 Bootstrap 3,但我不知道如何升级我的旧输入附加。

I had something like this:

我有这样的事情:

<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>

Preview: http://bootply.com/75910

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

In Bootstrap 3, this is the closest I could get

在 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>

Preview: http://bootply.com/75912

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

If I remove that span it gets perfect, but they are in different lines.

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

Any idea how to do this properly?

知道如何正确执行此操作吗?

回答by elyase

This is documented hereand 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-groupas the parent class around the input and addon.
  • For text based prepends/appends, use .input-group-addoninstead of .addon.
  • For button prepends/appends, use .input-group-btnand place your .btnwithin that element.

删除单数的 input-prepend 和 input-append .input-group。里面的元素的类已经改变,需要更多的标记来使用按钮:

  • 使用.input-group周围输入和插件的父类。
  • 对于基于文本的前置/附加,使用.input-group-addon代替.addon
  • 对于按钮前置/附加,使用.input-group-btn并放置.btn在该元素中。

Example:

例子:

<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>

EDIT: Working examples from @kviktor and @max4ever:

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

http://bootply.com/75917

http://bootply.com/75917

http://bootply.com/78014

http://bootply.com/78014