Is there a solution in Bootstrap 4.0.0 to align the right edge of the dropdown menu with the right side of the toggle button? Here's an image showing the current layout:
https://i.sstatic.net/3ccIE.png
Code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">CS50Net</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<div class="btn-group">
<button type="button" class="btn btn-danger">{{ session.username }}</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</li>
</ul>
</nav>