Изменения размера ввода текста в навигационной панели с бутстрапом

Question

У меня есть следующий Navbar в верхней части моей страницы (в значительной степени скопированной из примера начальной загрузки 3) - вы можете игнорировать код шаблона Джанго:

<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-* в разных местах (между прочим), но ничто не влияет на ширину ввода.

Что мне здесь не хватает? Любые предложения относительно того, как изменить размер ввода или где искать хорошую информацию о размере формы, будут оценены (я прочитал документацию по загрузке в формах, но пока это не помогло).

Вот пример навигатора: https://jsfiddle.net/38apotau/ Я хотел бы изменить размер ввода как минимум в два раза больше, чем в этом примере.

Answer 1

Ширина элемента устанавливается в width: auto с помощью бутстрапа, предоставляя иерархию классов, которую вы установили.

Вы можете переопределить ширину входного, придав ему определенный размер пикселя:

#spotsearch { width: 350px; }