css - para - Bootstrap 4: el menú desplegable se apaga a la derecha de la pantalla
menu desplegable html5 vertical (3)
Bootstrap ya tiene esto incorporado: vea la
alineación del menú
.
Simplemente agregue la clase
dropdown-menu-right
al
dropdown-menu
div.
<div class="dropdown-menu dropdown-menu-right">
Ejemplo de trabajo
.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>
Parece que no puedo obtener los elementos desplegables para que no salgan de la página. Probé un par de cosas de BS3 pero parece que no funcionan. No estoy seguro de si es por el ml-auto. (ignore las declaraciones if-else)
Aquí está el codepen
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>
En su hoja de estilo, para
.dropdown-menu
cambie a la
left: 0;
a la
right: 0;
.
Para el beneficio de aquellos que se topan con este problema cuando buscan en Google pero están usando reaccionar, la respuesta aceptada (aunque correcta) no resolverá el problema por usted. React ignora ''dropdown-menu-right'' cuando lo agrega manualmente a className. En su lugar, actualice su código a la siguiente y establece correctamente la misma clase.
Para javascript
<DropdownMenu right>
Para mecanografiar
<DropdownMenu right={true}>
Poniéndolo aquí como apareció este hilo cuando busqué en Google el problema y me llevó bastante tiempo descubrir la solución correcta para Bootstrap 4 en react (reactstrap).