Bootstrap 4: le menu déroulant s'éteint à droite de l'écran
je ne peux pas sembler obtenir la liste des éléments à ne pas aller hors de la page. J'ai essayé quelques trucs de BS3 mais ça ne marche pas. Je ne sais pas si c'est à cause du ml-auto. (ignorer l'if-else)
Heres la 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>
38
demandé sur
bbennett36
2017-02-05 01:20:18
3 réponses
Bootstrap a déjà intégré ceci: voir Alignement Du Menu. Il suffit d'ajouter le dropdown-menu-right classe dropdown-menu div.
<div class="dropdown-menu dropdown-menu-right">
Exemple:
.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>76
répondu
vanburen
2017-02-05 00:14:47
Dans votre feuille de style, pour .dropdown-menu modifier left: 0;right: 0;.
4
répondu
Win
2017-02-04 22:25:16
pour le bénéfice de ceux qui trébuchent sur cette question lors de googler mais utilisent react, la réponse acceptée (bien que correcte) ne résoudra pas le problème pour vous. React ignore 'dropdown-menu-right' lorsque vous l'ajoutez manuellement au nom de la classe. Au lieu de cela, mettez à jour votre code vers le bas et il définit correctement la même classe.
pour javascript
<DropdownMenu right>
Pour tapuscrit
<DropdownMenu right={true}>
le mettre ici comme ce fil est apparu quand je googlais le problème et j'ai mis du temps à trouver la bonne solution pour bootstrap 4 dans react (reactstrap).
1
répondu
NickS
2018-08-29 09:15:05