<nav class="navbar navbar-dark bg-dark navbar-expand-md">
	<div class="container">
		<button class="navbar-toggler d-none" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
		<div class="collapse navbar-collapse" id="navcol-1">
			<ul class="nav navbar-nav w-100 justify-content-between">
				<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">Navbar link 1</a>
					<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">This is a very very long dropdown item and it may overflow the viewport</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
				</li>
				<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">Navbar link 2</a>
					<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">This is a very very long dropdown item and it may overflow the viewport</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
				</li>
				<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#">Navbar link 3</a>
					<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">This is a very very long dropdown item and it may overflow the viewport</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
				</li>
				<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#">Navbar link 4</a>
					<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">This is a very very long dropdown item and it may overflow the viewport</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
				</li>
				<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#">Navbar link 5</a>
					<div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">This is a very very long dropdown item and it may overflow the viewport</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div class="text-center mt-4">
	<button type="button" id="trigger-btn" class="btn btn-lg btn-danger">Click me</button>
<hr class="my-4">
<p>Click the button above to position the drop-down menus and keep them from getting out of the viewport</p>
	<p>Dropdown menus will be centered if possible, or left/right aligned if not</p>
</div>

var $maxWidthElement = $('.navbar'),
	maxWidth = $maxWidthElement.width();

function positionDropdowns() {
	$('.dropdown-menu').each(function() {
		$(this).removeClass('dropdown-menu-right');
		var $navItem = $(this).closest('.dropdown'),
			dropdownWidth = $(this).outerWidth(),
			dropdownOffsetLeft = $navItem.offset().left,
			dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
			linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2,
			outputCss = {
				left: 0,
				right: '',
				width: ''
			};

		if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
			// center the dropdown menu if possible
			outputCss.left = -(dropdownWidth / 2 - $navItem.outerWidth() / 2);
		} else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
			// set the dropdown menu to left if it exceeds the viewport on the right
			$(this).addClass('dropdown-menu-right');
			outputCss.left = '';
		} else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
			// full width if the dropdown is too large to fit on the right
			outputCss.left = 0;
			outputCss.right = 0;
			outputCss.width = maxWidth + 'px';
		}
		$(this).css({
			left: outputCss.left,
			right: outputCss.right,
			width: outputCss.width
		});
	});
}

$("#trigger-btn").on("click", function() {
	positionDropdowns();
	$(this)
		.text("Done!")
		.addClass("btn-success")
		.removeClass("btn-danger");
});

var resizeTimer;

$(window).on("resize", function(e) {
	clearTimeout(resizeTimer);
	resizeTimer = setTimeout(function() {
		maxWidth = $maxWidthElement.width();
		positionDropdowns();
	}, 250);
});