CSS Bootstrap 4：下拉菜单从屏幕右侧消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42046287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 12:23:55 来源:igfitidea点击:
Bootstrap 4: Dropdown menu is going off to the right of the screen
提问by bbennett36
I cant seem to get the drop down items to not go off the page. I tried a couple of things from BS3 but they don't seem to work. I'm not sure if its because of the ml-auto. (ignore the if-else statements)
我似乎无法让下拉项目不离开页面。我从 BS3 尝试了一些东西，但它们似乎不起作用。我不确定是不是因为 ml-auto。（忽略 if-else 语句）
Heres the codepen
http://codepen.io/bbennett36/pen/oByzgw
继承人代码笔
http://codepen.io/bbennett36/pen/oByzgw
<div class="container-fluid">
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;">
<button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div id="logo">
<a class="navbar-brand" href="/">Company</a>
</div>
<div class="collapse navbar-collapse" id="searchNav">
<ul class="navbar-nav mx-auto">
<form action="/search" class="form-inline">
<input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
<!-- <div class="input-group"> -->
<input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
<!-- <button class="btn btn-secondary" type="button">Find Jobs</button> -->
<!-- </span> -->
<!-- </div> -->
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
</form>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="/post" class="nav-link"><strong>Post Job</strong></a></li>
<div class="hidden-lg-up">
<li v-if="!user_logged" class="nav-item">
<a v-if="!user_logged" href="/signup" class="nav-link"><strong>Register</strong></a>
</li>
<li v-if="user_logged && user_type === 'user'" class="nav-item">
<a v-if="user_logged && user_type === 'user'" href="/profile" class="nav-link"><strong>Profile</strong></a>
</li>
<li v-if="user_logged && user_type === 'user'" class="nav-item">
<a v-if="user_logged && user_type === 'user'" href="/applied" class="nav-link"><strong>My Jobs</strong></a>
</li>
<li v-if="user_logged && user_type === 'user'" class="nav-item">
<a v-if="user_logged && user_type === 'user'" href="/searches" class="nav-link"><strong>My Searches</strong></a>
</li>
<li v-if="user_logged && user_type === 'company'" class="nav-item">
<a v-if="user_logged && user_type === 'company'" href="/dashboard" class="nav-link"><strong>Employer Dashboard</strong></a>
</li>
<li v-if="!user_logged" class="nav-item">
<a v-if="!user_logged" href="/login" class="nav-link"><strong>Login</strong></a>
</li>
<li v-if="user_logged" class="nav-item">
<a v-if="user_logged" href="/logout" class="nav-link"><strong>Logout</strong></a>
</li>
</div>
<div class="hidden-md-down">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<strong>Account</strong>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<!-- <li v-if="!user_logged" class="nav-item"> -->
<a v-if="!user_logged" href="/signup" class="dropdown-item"><strong>Register</strong></a>
<!-- </li> -->
<!-- <li v-if="user_logged && user_type === 'user'" class="nav-item"> -->
<a v-if="user_logged && user_type === 'user'" href="/profile" class="dropdown-item"><strong>Profile</strong></a>
<a v-if="user_logged && user_type === 'user'" href="/applied" class="dropdown-item"><strong>My Jobs</strong></a>
<a v-if="user_logged && user_type === 'user'" href="/searches" class="dropdown-item"><strong>My Searches</strong></a>
<!-- </li> -->
<!-- <li v-if="user_logged && user_type === 'company'" class="nav-item"> -->
<a v-if="user_logged && user_type === 'company'" href="/dashboard" class="dropdown-item"><strong>Employer Dashboard</strong></a>
<!-- </li> -->
<!-- <li v-if="!user_logged" class="nav-item"> -->
<a v-if="!user_logged" href="/login" class="dropdown-item"><strong>Login</strong></a>
<!-- </li> -->
<!-- <li v-if="user_logged" class="nav-item"> -->
<a v-if="user_logged" href="/logout" class="dropdown-item">
<div class="dropdown-divider"></div>
<strong>Logout</strong>
</a>
<!-- </li> -->
</div>
</li>
</div>
</ul>
</div>
</nav>
</div>
回答by vanburen
Bootstrap has this built in already: See Menu Alignment. Just add the dropdown-menu-rightclass to the dropdown-menudiv.
Bootstrap 已经内置了这个：请参阅菜单对齐。只需将dropdown-menu-right类添加到dropdown-menudiv。
<div class="dropdown-menu dropdown-menu-right">
Working Example:
工作示例：
.navbar {
background-color: #3c763d;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="logo">
<a class="navbar-brand" href="#">Company</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto hidden-md-down">
<form action="#" class="form-inline">
<input class="form-control" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
<input class="form-control" id="location" name="location" :value='location' type="text" placeholder="Location" />
<button class="btn btn-secondary" type="submit">Find Jobs</button>
</form>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link"><strong>Post Job</strong></a>
</li>
<div class="hidden-lg-up">
<li class="nav-item">
<a href="#" class="nav-link"><strong>Register</strong></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><strong>Profile</strong></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><strong>My Jobs</strong></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><strong>My Searches</strong></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><strong>Employer Dashboard</strong></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><strong>Login</strong></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><strong>Logout</strong></a>
</li>
</div>
<li class="nav-item dropdown hidden-md-down">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<strong>Account</strong>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item"><strong>Register</strong></a>
<a href="#" class="dropdown-item"><strong>Profile</strong></a>
<a href="#" class="dropdown-item"><strong>My Jobs</strong></a>
<a href="#" class="dropdown-item"><strong>My Searches</strong></a>
<a href="#" class="dropdown-item"><strong>Employer Dashboard</strong></a>
<a href="#" class="dropdown-item"><strong>Login</strong></a>
<a href="#" class="dropdown-item">
<div class="dropdown-divider"></div>
<strong>Logout</strong>
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>回答by Win
In your style sheet, for .dropdown-menuchange left: 0;to right: 0;.
在您的样式表中，.dropdown-menu更改left: 0;为right: 0;.
回答by NickS
For the benefit of those who stumble upon this issue when googling but are using react, the accepted answer (whilst correct) won't solve the issue for you. React ignores 'dropdown-menu-right' when you add it manually to the className. Instead, update your code to the below and it correctly sets the same class.
为了那些在谷歌搜索时偶然发现这个问题但正在使用反应的人的利益，接受的答案（虽然正确）不会为您解决问题。当您手动将其添加到 className 时，React 会忽略 'dropdown-menu-right'。相反，将您的代码更新为下面的代码，它会正确设置相同的类。
For javascript
对于 JavaScript
<DropdownMenu right>
For typescript
对于打字稿
<DropdownMenu right={true}>
Putting it in here as this thread appeared when I was googling the issue and took me quite a while to figure out the correct solution for bootstrap 4 in react (reactstrap).
把它放在这里，因为当我在谷歌搜索这个问题时出现了这个线程，我花了很长时间才找出反应（reactstrap）中引导程序 4 的正确解决方案。
