css - para - Bootstrap 4: el menú desplegable se apaga a la derecha de la pantalla

menu desplegable html5 vertical

Question

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>

Answer 1

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>

Answer 2

En su hoja de estilo, para .dropdown-menu cambie a la left: 0; a la right: 0; .

Answer 3

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).