JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default  navbar-inverse" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button> <a class="navbar-brand" href="#">Brand</a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
          <li class="active">
              <a href="#">Link</a>
          </li>
          <li>
              <a href="#">Link</a>
          </li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="calcWidth()">Dropdown<strong class="caret"></strong></a>
              <ul class="dropdown-menu linedUp">
                  <li>
                      <a href="#">Action</a>
                  </li>
                  <li>
                      <a href="#">Action 2</a>
                  </li>
                  <li>
                      <a href="#">Something else here</a>
                  </li>
                  <li>
                      <a href="#">Separated link</a>
                  </li>
                  <li>
                      <a href="#">One more separated link</a>
                  </li>
              </ul>
          </li>
      </ul>
  </div>

</nav>

CSS

.linedUp > li{
  display: inline;
  float: left;
}

JavaScript

var pos = parseInt($('.linedUp').closest('.dropdown').position().left);
calcWidth = function(){
	setTimeout(function(){
  	var width = 0;
    var maxWidth = $(document).width() - pos;
  	$('.linedUp li').each(function(){
      width += parseInt($(this).outerWidth()) + 2;
      if( maxWidth < width){
      	width -= parseInt($(this).outerWidth());
      }
      
    });
    $('.linedUp').css({
    	width: width
    });
  }, 0);
  	
}