使用引导程序调整导航栏内的文本输入大小

Question

我的页面顶部有以下导航栏（从bootstrap 3示例中大量复制） - 您可以忽略Django模板代码：

 <nav class="navbar navbar-default">
     <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand plain" href="{% url 'home' %}">Miniquad Maps</a>
         </div>

      <form method="POST" action="{% url 'spot_search' %}" class="navbar-form navbar-left" role="search">
             <div class="form-group">
                 <input id="spotsearch" type="text" class="form-control" placeholder="Search spots" name="spotsearch">
             </div>
             <button type="submit" class="btn btn-default">
                 <span class="glyphicon glyphicon-search"></span> Search
             </button>
             {% csrf_token %}
         </form>
     </div>
 </nav>

我想弄清楚如何调整搜索输入的大小（id="spotsearch"）。我想把它做得更宽，我已经尝试了很多东西，但是元素似乎受到其他东西的限制（毫无疑问，某些引导类，但我无法弄清楚哪一个）。

我尝试在各个地方（除其他外）使用.col-size-*，但似乎没有任何影响输入的宽度。

我在这里缺少什么？关于如何调整输入大小或在何处寻找有关表单大小调整的好信息的任何建议都将受到赞赏（我已经阅读了表单上的bootstrap文档，但到目前为止这在这方面没有帮助。）

以下是导航栏的示例：https://jsfiddle.net/38apotau/ 我想将输入的大小调整为该示例中的两倍大小。

Answer 1

通过bootstrap将元素的宽度设置为width: auto，给出您已设置的类层次结构。

您可以通过为其指定特定的像素大小来覆盖输入的宽度：

#spotsearch { width: 350px; }