My application generates navbar buttons dynamically, and sometimes there are too many buttons causing them to stretch beyond the screen width instead of wrapping to the next line. This behavior used to work correctly in bootstrap v4.0.0-alpha but not in v4.1.3. Is there a way to make the buttons wrap onto the next line instead of overflowing and triggering a scroll bar?
Sample code snippet:
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Many navbar buttons</title;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Many navbar buttons</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSelect" aria-controls="navbarSelect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSelect">
<ul class="navbar-nav mr-auto">
<!-- Button Items -->
</ul>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>