title: Twitter bootstrap dropdown goes outside the screen
body: <p>I want to implement twitter bootstrap dropdown menu, here's my code:</p>
  
  <pre><code>&lt;span class="dropdown"&gt; 
  &lt;a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" &gt;&lt;img class="left" src="/static/img/topmenu_preferences.png" /&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;d&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Dropdown works good, my dropdown is placed next to right edge of the screen and when I click my dropdown-toggle, the list goes outside the screen. It looks like on the screen:</p>
  
  <p><img src="https://i.stack.imgur.com/I7cor.png" alt="enter image description here"></p>
  
  <p>How can i fix it?</p>