Bootstrap2输入 - 小不适用于手机

Question

我有这段代码，我正在使用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>  

On Desktop＆amp;片剂

虽然没有在手机上工作：

关于如何解决这个问题的任何想法？提前谢谢。

Answer 1

在你的bootstrap-responsive.css中，还有更具体的css over the riding：

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

要更改所有 .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>