Bootstrap2 input-small 在手机上不起作用

【问题标题】：Bootstrap2 input-small does not work on handphoneBootstrap2 input-small 在手机上不起作用
【发布时间】：2014-10-20 11:23:19
【问题描述】：

我有这段代码，我正在使用input-small 来缩短我的文本框宽度。它适用于台式机和平板电脑，但不适用于移动设备。

<div class="input-append date">
    <input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
 </div>

在台式机和平板电脑上

虽然没有在手机上工作：

知道如何解决这个问题吗？提前致谢。

【问题讨论】：

@Sudheer input-small 确实存在，但仅存在于 OP 正在使用的 Bootstrap v2 中。

标签： css twitter-bootstrap responsive-design less twitter-bootstrap-2

【解决方案1】：

在您的 bootstrap-responsive.css 中，有更具体的 css 覆盖：

  .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block;
    width: auto;
  }

要更改 all .input-append 以使用 .input-small 宽度，在所有其他 css 之后执行此操作：

@media (max-width:767px) {

   .input-append .input-small {width:90px;}

}

如果您只想处理 .input-append，请更具体。

@media (max-width:767px) {

   .small-input-append.input-append .input-small {width:90px;}

}

将您的 html 更改为：

<div class="small-input-append input-append date">
    <input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
 </div>

【讨论】：