After deciding to use Bootstrap 4 for my current project, I encountered an issue with the navbar. It seems to expand too much, which is only happening once I deploy the website. Can anyone help me figure out what's causing this problem? Below is the code snippet including the navbar:
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<button class="navbar-toggler hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar2">
<a class="navbar-brand" href="/Home/">@ViewBag.Title</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="btn navbar-btn" id="changeEmployeeBtn" href="/Home/ChangeEmployee/">Change Employee.</a>
</li>
<li class="nav-item hidden-sm-up">
<br />
</li>
<li class="nav-item">
<a class="btn navbar-btn" href="" id="printBtn">Print</a>
</li>
<li class="nav-item hidden-sm-up">
<hr />
</li>
<li class="nav-item">
<a class="navbar-text">Employee: @HttpContext.Current.Request["EmployeeName"]</a>
</li>
</ul>
</div>
</nav>