title: Full screen width Bootstrap dropdown menu
body: <p>I am trying to make bootstrap drop down menu full screen width and fluid, but it seems i can not do it :) I am trying to put the search field into drop down menu (search filed &amp; search button have to be in the center of the submenu field). </p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;ul class="nav pull-right"&gt;
  &lt;li class="dropdown"&gt; 
      &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Search&lt;/b&gt;&lt;/a&gt;
         &lt;ul class="dropdown-menu" id="menu1"&gt;
          &lt;div class="search_field"&gt;
         &lt;form class="navbar-form pull-right"&gt;
               &lt;input type="text" class="span4" placeholder="Search"&gt;
                &lt;button type="submit" class="btn btn-search"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
       &lt;/div&gt;
     &lt;/ul&gt;                        
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dropdown-menu {
  background-clip: padding-box;
  background-color: #FFFFFF;
  border: 0px !important;
  border-radius: 0px !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  float: left;
  list-style: none outside none;
  margin: 0px;
  min-width: 100%;
  padding: 10px 100%;
  margin: 0, -100%;
  position: absolute;
  top: 100%;
  z-index: 1000;
   }
   }
  
  .btn-search {
  background-color: orange !important;
  background-image: linear-gradient(to bottom, orange, #orange light) !important;
  background-repeat: repeat-x !important;
  padding: 10px 20px !important;
   }
  </code></pre>