web-dev-qa-db-fra.com

Bootstrap 4: le menu déroulant s'affiche à droite de l'écran

Je n'arrive pas à obtenir le menu déroulant pour ne pas sortir de la page. J'ai essayé quelques solutions de BS3, mais elles ne semblent pas fonctionner. Je ne sais pas si c'est à cause de ml-auto. (ignore les déclarations if-else)

Heres le 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>
csstwitter-bootstrapcss3bootstrap-4
69
bbennett36

Bootstrap a déjà intégré cette fonction: Voir Alignement du men . Ajoutez simplement la classe dropdown-menu-right à la dropdown-menu div.

<div class="dropdown-menu dropdown-menu-right">

Exemple de travail: 

.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>
143
vanburen

Dans votre feuille de style, pour .dropdown-menu, remplacez left: 0; par right: 0;.

7
Win

Pour le bénéfice de ceux qui trébuchent sur ce problème lors de la recherche sur Google mais qui utilisent, réagissent, la réponse acceptée (bien que correcte) ne résoudra pas le problème pour vous. React ignore le 'menu déroulant-droit' lorsque vous l'ajoutez manuellement au nom de la classe. Au lieu de cela, mettez à jour votre code vers le ci-dessous et il définira correctement la même classe.

Pour javascript

<DropdownMenu right>

Pour TypeScript

<DropdownMenu right={true}>

En le mettant ici lorsque ce fil est apparu lorsque je cherchais le problème sur Google, il m'a fallu un bon bout de temps pour trouver la solution correcte pour bootstrap 4 dans rea (réactstrap).

3
NickS