Is there a way to prevent the expansion of the page and the appearance of a scroll bar when clicking on the menu, using bootstrap?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515617b637b65">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d19031b031d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<div class="navbar-nav ml-auto">
<div class="nav-item dropdown">
<a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle user-action"> P<b class="caret"></b></a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"><i class="fa fa-user-o"></i> Profile creation</a></a>
<a href="#" class="dropdown-item"><i class="fa fa-calendar-o"></i> Calendar</a></a>
<a href="#" class="dropdown-item"><i class="fa fa-sliders"></i> Settings</a></a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="material-icons"></i> Logout</a></a>
</div>
</div>
</div>
</div>
</nav>