Bootstrap 4:下拉菜单从屏幕右侧消失 [英] Bootstrap 4: Dropdown menu is going off to the right of the screen
问题描述
我似乎无法让下拉项目不离开页面.我从 BS3 尝试了一些东西，但它们似乎不起作用.我不确定是否是因为 ml-auto.(忽略 if-else 语句)
这是 CodePen:
<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";类型=按钮"数据切换=折叠"数据目标=#searchNav"；aria-controls="searchav";aria-expanded="false";aria-label =切换导航"><span class="navbar-toggler-icon"></span><button class="navbar-toggler navbar-toggler-right";类型=按钮"数据切换=折叠"数据目标=#navbarNav"；aria-controls="navbarNav";aria-expanded="false";aria-label =切换导航"><span class="navbar-toggler-icon"></span><!-- <button class="navbar-toggler navbar-toggler-right";类型=按钮"数据切换=折叠"数据目标=#navbarToggleExternalContent"aria-controls="navbarToggleExternalContent";aria-expanded="false";aria-label =切换导航"><span class="navbar-toggler-icon"></span>--><div id="logo"><a class="navbar-brand";href=/">公司</a><div class="collapse navbar-collapse";id="searchNav"><ul class="navbar-nav mx-auto"><form action="/search";class =表单内联"><input class="form-control mr-sm-2";id=关键字"名称=关键字":value='keyword' type="text"placeholder="搜索工作";/><!-- <div class="input-group">--><input class="form-control mr-sm-2";id=位置"名称=位置":value='location' type="text"占位符=位置"/><!-- <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></表单>
<div class="collapse navbar-collapse";id="navbarNav"><ul class="navbar-nav ml-auto"><li class="nav-item"><a href="/post";class=nav-link"><strong>发布职位</strong></a></li><div class="hidden-lg-up"><li v-if="!user_logged";class="nav-item"><a v-if="!user_logged";href="/注册";class=nav-link"><strong>注册</strong></a><li v-if="user_logged &&user_type === '用户'";class="nav-item"><a v-if="user_logged &&user_type === '用户'";href="/profile";class=nav-link"><strong>个人资料</strong></a><li v-if="user_logged &&user_type === '用户'";class="nav-item"><a v-if="user_logged &&user_type === '用户'";href="/applied";class=nav-link"><strong>我的工作</strong></a><li v-if="user_logged &&user_type === '用户'";class="nav-item"><a v-if="user_logged &&user_type === '用户'";href="/searches";class="nav-link"><strong>我的搜索</strong></a><li v-if="user_logged &&user_type === '公司'";class="nav-item"><a v-if="user_logged &&user_type === '公司'";href="/dashboard";class=nav-link"><strong>雇主仪表板</strong></a><li v-if="!user_logged";class="nav-item"><a v-if="!user_logged";href="/登录";class="nav-link">登录<li v-if="user_logged";class="nav-item"><a v-if="user_logged";href="/注销";class=nav-link"><strong>注销</strong></a>
<div class="hidden-md-down"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle";href="/";id="navbarDropdownMenuLink";数据切换=下拉"aria-haspopup="true";aria-expanded="false"><strong>帐户</strong></a><div class="下拉菜单";aria-labelledby=navbarDropdownMenuLink"><!-- <li v-if="!user_logged";class="nav-item">--><a v-if="!user_logged";href="/注册";class="dropdown-item">注册<!-- </li>--><!-- <li v-if="user_logged &&user_type === '用户'";class="nav-item">--><a v-if="user_logged &&user_type === '用户'";href="/profile";class="dropdown-item"><strong>个人资料</strong></a><a v-if="user_logged &&user_type === '用户'";href="/applied";class="dropdown-item"><strong>我的工作</strong></a><a v-if="user_logged &&user_type === '用户'";href="/searches";class="dropdown-item"><strong>我的搜索</strong></a><!-- </li>--><!-- <li v-if="user_logged &&user_type === '公司'";class="nav-item">--><a v-if="user_logged &&user_type === '公司'";href="/dashboard";class="dropdown-item"><strong>雇主仪表板</strong></a><!-- </li>--><!-- <li v-if="!user_logged";class="nav-item">--><a v-if="!user_logged";href="/登录";class="dropdown-item">登录<!-- </li>--><!-- <li v-if="user_logged";class="nav-item">--><a v-if="user_logged";href="/注销";类=下拉项"><div class="dropdown-divider"></div><strong>注销</strong></a><!-- </li>-->
