Bootstrap 4: Das Dropdown-Menü wird rechts auf dem Bildschirm angezeigt

Ich kann nicht scheinen, die Dropdown-Elemente zu bekommen, um nicht von der Seite zu verschwinden. Ich habe ein paar Dinge von BS3 ausprobiert, aber sie scheinen nicht zu funktionieren. Ich bin mir nicht sicher, ob es am ml-auto liegt. (ignorieren Sie die if-else-Anweisungen)

Hier ist der CodePen :

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

In Bootstrap ist dies bereits integriert: Siehe Menüausrichtung . Fügen Sie einfach die dropdown-menu-rightKlasse zum dropdown-menudiv hinzu.

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

Arbeitsbeispiel: (ganze Seite öffnen)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-xl navbar-dark bg-primary">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

  <a class="navbar-brand" href="#">Company</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form action="#" class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
      <input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
    </form>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active">
          <strong>Post Job</strong>
        </a>
      </li>
      <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>
    </ul>

    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <strong>Account</strong>
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

Zum .dropdown-menuÄndern left: 0;in Ihrem Stylesheet right: 0;.

Für diejenigen, die beim Googeln auf dieses Problem stoßen, aber reagieren, wird die akzeptierte Antwort (obwohl sie korrekt ist) das Problem nicht für Sie lösen. React ignoriert 'Dropdown-Menü-rechts', wenn Sie es manuell zum Klassennamen hinzufügen. Aktualisieren Sie stattdessen Ihren Code wie folgt und er setzt dieselbe Klasse korrekt.

Für Javascript

<DropdownMenu right>

Für Typoskript

<DropdownMenu right={true}>

Fügen Sie es hier ein, da dieser Thread angezeigt wurde, als ich das Problem googelte, und ich habe eine ganze Weile gebraucht, um die richtige Lösung für Bootstrap 4 in React (Reactstrap) zu finden.