title: Forcing Bootstrap's Typeahead Dropdown to Match a Custom Input Width
body: <p>I'm working with Bootstrap's Typeahead and adding the input like so:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span12"&gt;
          &lt;form class="centered"&gt;
                  &lt;input id="main_search" type="text" class="search-query my-search" data-provide="typeahead"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:</p>
  
  <pre><code>.centered {
      text-align:center;
  }
  
  /* Make the main search box wider */
  .my-search { 
      width: 80%;
  }
  </code></pre>
  
  <p>My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality. </p>
  
  <p><a href="https://github.com/twitter/bootstrap/issues/1653" rel="nofollow">This closed issue</a> suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm <strong>unsure how to make sure the dropdown-menu inherits the input's length</strong> (so that it'll work despite browser resizing).</p>
  
  <p>Thanks for any help that you can provide!</p>
  
  <p><strong>Current code:</strong>
  <a href="http://jsfiddle.net/jtoland2/75G6t/4/" rel="nofollow">JSFiddle</a></p>