将“.input-prepend”附加到引导按钮

【问题标题】：Attaching ".input-prepend" to Bootstrap Buttons将“.input-prepend”附加到引导按钮
【发布时间】：2013-06-11 07:26:19
【问题描述】：

如何在 Bootstrap 的按钮中添加追加输入？ Here 是我要修复的代码，代码如下：

<div class="container">
  <div class="hero-unit">
    <div class="input-prepend">
      <span class="add-on">
         <i class="icon-move icon-black"></i>
      </span>
      <button class="btn btn-mini btn-info">Test Input Prepend</button>
    </div>
  </div>
</div>

它可以工作，但是，当我使用 .btn-mini 类时，它看起来像这样

我该如何解决这个问题？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

没有“迷你”input-prepend 所以你需要自定义..

.input-mini .add-on {
  height: 14px;
  min-width: 15px;
  padding: 4px;
  padding-top:2px;
  font-size: 10px;
  line-height: 10px;
}

<div class="input-prepend input-mini">
      <span class="add-on">
         <i class="icon-move icon-black"></i>
      </span>
      <button class="btn btn-mini btn-info">Test Input Prepend</button>
</div>

Bootply

【讨论】：