Bootstrap dropdown clipped by overflow:hidden container, how to change the container?

Using bootstrap, I have a dropdown menu(s) inside a <div> with overflow: hidden, which is needed to be like this. This caused the dropdowns to be clipped by the container.

My question is, how can I solve this clipping issue, e.g. change the container of all dropdowns inside my project to be body, with the lowest cost possible?

.bs-example {
  height: 80px;
  border: 1px solid black;
  overflow: hidden;
}

<div class="bs-example">
  <div class="dropdown">
    <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
      </a>

    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
</div>

if anyone interested in a workaround for this, bootstrap dropdown has a show.bs.dropdown event you may use to move the dropdown element outside the overflow:hidden container.

$('.dropdown').on('show.bs.dropdown', function() {
  $('body').append($('.dropdown').css({
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top
  }).detach());
});

there is also a hidden.bs.dropdown event if you prefer to move the element back to where it belongs once the dropdown is closed:

$('.dropdown').on('hidden.bs.dropdown', function() {
  $('.bs-example').append($('.dropdown').css({
    position: false,
    left: false,
    top: false
  }).detach());
});

Here is a working example:

http://jsfiddle.net/qozt42oo/32/