Question

我使用.input-lg使表单字段变大。我的期望是当视口缩小（默认情况下低于768px）时，表单字段会变小并采用正常设置，但它们不是。有任何想法吗？引导程序是否处理这种情况？

更新

HTML

   <form class="form-inline" role="form">
      <div class="form-group">
         <label class="sr-only" for="searchZipcode">Zipcode</label>
         <input type="text" class="form-control input-lg input-search" id="searchZipcode" placeholder="Zipcode of home?">
      </div>
   </form>

Answer 1

我认为你必须把你的输入放在一个div中。换句话说，input-xx类不响应：D

 <div class="col-xx-xx"> // change xx-xx to some accepted value like sm-4, md-10, whatever it fits you.
     <input class="input-lg">
 </div>

Answer 2

Bootstrap无法处理此方案。感谢大家的评论和答案。

Answer 3

出于这个原因，我通常更喜欢使用一个有意义的div。您可以应用引导类来使宽度响应。如果你愿意，你可以给它一个边框，使它看起来像一个输入。使用textContent而不是value来访问数据，并使用focusout事件而不是change事件。

Answer 4

我也遇到过这个问题。我通过添加

修复了它

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在html的head部分。但要小心，因为这也会禁用缩放。

Bootstrap响应式输入表单字段

4 个答案: