html - 使用 Bootstrap 调整导航栏内的文本输入

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" 的那个)。我想让它更宽，我已经尝试了很多东西，但元素似乎受到其他东西的限制(毫无疑问是一些 Bootstrap 类，但我一直无法弄清楚是哪一个)。

我曾尝试在不同的地方(除其他外)使用 .col-size-*，但似乎没有什么会影响输入的宽度。

我在这里错过了什么？任何关于如何调整输入大小或在哪里寻找有关表单大小的良好信息的建议都将不胜感激(我已经阅读了表单上的 Bootstrap 文档，但到目前为止这在这方面没有帮助)。

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

Answer 1

元素的宽度由 Bootstrap 设置为 width: auto，给出您设置的类层次结构。

您可以通过给它一个特定的像素大小来覆盖输入的宽度:

#spotsearch { 宽度:350px； }