title: How to add a responsive tab menu and shrink li menu item Bootstrap?
body: <p>My website has mega drop-down menu which is built on twitter bootstrap.</p>
  <p>I tried to add a tabbed menu, which is not bootstrap buil but responsive, to my mega drop down item.</p>
  <p>However, it doesn't fit there well and it wrap whole toggle.</p>
  <p>This is how I add a full width mega dropdown.</p>
  <pre><code>&lt;li class=&quot;dropdown full-width&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;TEST&lt;b
          class=&quot;icon-angle-down&quot;&gt;&lt;/b&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  <p>Here you can <strong><a href="http://www.carantina.com" rel="nofollow noreferrer">VIEW</a></strong> the demo page</p>
  <p>When you hover on item on the navbar 'ILETISIM', it toggles full width, which I exactly want. Because I built it with twitter bootstrap</p>
  <p><img src="https://i.stack.imgur.com/dSz38.png" alt="enter image description here" /></p>
  <p>However, please check the item <strong>'TEST'</strong>. The script that I added later is not twitter bootstrap built, but responsive and it breaks the navbar and makes the item's <strong>li</strong> full width as shown in the picture below.</p>
  <p><img src="https://i.stack.imgur.com/4OJal.png" alt="enter image description here" /></p>
  <p>I couldn't find any solutions for that until now.</p>
  <p>What I want is, it shall behave as same as how 'ILETISIM' item works.</p>
  <p>I will replace that menu with the new one.</p>