مشکل در نوبار بوت استرپت

[siros1983]

سلام من یه نوبار دارم با کد زیر



<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


مشکل توی dropdown هست .وقتی روی مدیوم به بالا هست مشکلی نیس ولی وقتی روی sm و xs میرم این dropdown ها داخل نوبار اجرا میشن که باعث میشه ارتفاع نوبار خیلی بالا بره
چطوری اینو یکاری کنم بیرون از منوی نوبار زیر منوها نمایش داده بشه
کد css ندارم
فقط فالی های بوت استرپ اضافه کردم

آنلاینم گذاشتم نمیدونم چرا اجرا نشد
https://jsfiddle.net/siros/y0d68ffs/2/