Bootstrap (4.0) dropdown in navbar cannot position right in relation to viewport
I have a navbar and a link btn floated right in the navbar. The link btn triggers the dropdown. I'd like the dropdown to open fixed to the right side of the viewport. When the dropdown opens it currently is half hidden beyond the right of the viewport. Even with the dropdown-menu-right class added to the dropdown-menu div.
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="btn btn-primary align-middle" href="/Home">Home</a>
</li>
<li class="nav-item">
<a class="btn btn-default align-middle" href="#link1">link1</a>
</li>
<li class="nav-item">
<a class="btn btn-default align-middle" href="#link2">link2</a>
</li>
<li class="nav-item">
<a class="btn btn-default align-middle" href="#link3">link3</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Try it free</button>
<span> or </span>
<div class="dropdown">
<a class="text-primary btn-link btn" href="#" id="loginMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-shield" aria-hidden="true"></span> Login</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="loginMenu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
I'd like to be able to use bootstrap classes to achieve the desired effect IF possible. Likely i will need to add some custom style as the menu is collapsible which pushes the dropdown trigger link button to the left. I'd like the dropdown to still open positioned to the right of the viewport in this case. Would be interested in understanding why the dropdown-menu-right is not working at all? thanks!
下拉菜单应该在导航栏中有.navbar-nav，才能正确工作，因为它写在这里：https：//getbootstrap.com/docs/4.0/components/navbar/#supported-content
链接地址: http://www.djcxy.com/p/94566.html上一篇: 在C ++中传递一个类对象作为参数