Bootstrap 4: Rozwijane menu pojawia się po prawej stronie ekranu

114

Nie mogę sprawić, by rozwijane elementy nie znikały ze strony. Wypróbowałem kilka rzeczy z BS3, ale wydaje się, że nie działają. Nie jestem pewien, czy to z powodu ml-auto. (zignoruj ​​instrukcje if-else)

Oto 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>
twitter-bootstrap css bootstrap-4 bbennett36
źródło

Odpowiedzi:

199

Bootstrap ma już to wbudowane: Zobacz Wyrównanie menu . Po prostu dodaj dropdown-menu-rightklasę do dropdown-menudiv.

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

Przykład roboczy: (otwórz całą stronę)

<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>
Rozwiń fragment

vanburen
źródło
5
Och, nie sądziłem, że wywołanie „menu rozwijanego w prawo” wyrówna elementy do lewej. Dzięki!
bbennett36
1
To zadziałało, ale to błąd polegający na umieszczaniu tej samej klasy we wszystkich listach rozwijanych ... więc upewnij się, że tylko te zajęcia znajdują się na ostatniej liście rozwijanej - która wychodzi poza ekran.
Abdeali Chandanwala
1
AKTUALIZACJA: Oto zaktualizowana dokumentacja wyrównania menu Bootstrap 4. Ten wymieniony w tej odpowiedzi jest nieaktualny: getbootstrap.com/docs/4.5/components/dropdowns/#menu-alignment
Paula
1
@Paula Dzięki Paula, zaktualizowała odpowiedź o aktualne dokumenty i zależności.
vanburen
6

W swoim arkuszu stylów do .dropdown-menuzmiany left: 0;na right: 0;.

Zdobyć
źródło
1
Wydaje się, że to powinno być rozwiązanie, ale nie działa
bbennett36
Musisz usunąć lewy atrybut, bo inaczej powyższe nie zadziała, ponieważ nadal jest ustawiony na 0. Zwykle trzymam się z daleka od używania! Ważne, ponieważ jest to zła praktyka.
Wygraj
Myślę, że jest to domyślne ustawienie w BS4, dlatego użyłem! Ważne.
bbennett36
4

Z korzyścią dla tych, którzy natkną się na ten problem podczas wyszukiwania w Google, ale używają funkcji Reaguj, zaakceptowana odpowiedź (choć poprawna) nie rozwiąże problemu. Reakcja ignoruje „rozwijane-menu-prawo”, gdy dodajesz je ręcznie do nazwy klasy. Zamiast tego zaktualizuj kod do poniższego i poprawnie ustawia tę samą klasę.

W przypadku javascript

<DropdownMenu right>

Na maszynopis

<DropdownMenu right={true}>

Umieszczenie go tutaj, ponieważ ten wątek pojawił się, gdy szukałem problemu w Google, i zajęło mi sporo czasu, aby znaleźć prawidłowe rozwiązanie dla bootstrap 4 w React (Reactstrap).

NickS
źródło
1
Zobacz sekcję „ Dokumentacja”: Reactstrap.github.io/components/dropdowns „Wyrównanie”. (To prawda, zajęło mi znalezienie tej odpowiedzi, aby znaleźć właściwą część w dokumentacji)
mix3d
0

Przeglądałem Twój kod i myślę, że zaakceptowana odpowiedź dotyczy innego problemu. Jeśli menu przesunie się w lewo lub w prawo strony i nie znajduje się pod przyciskiem, oznacza to, że brakuje Ci klasy nadrzędnej .btn-groupi wygląda na to, że Twoje .dropdown-togglei .dropdown-menuklasy znajdują się na niewłaściwych elementach. Oto najbardziej podstawowy przykład z dokumentacji Bootstrap 4.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Przejrzałem tylko mały blok twojego kodu, ale na końcu, gdy masz listę rozwijaną na dużych ekranach, skupiłem się na tym.

 <li class="nav-item dropdown"> <!--- change this line --->
            <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>

do

 <li class="nav-item btn-group">
            <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>
Tralawar
źródło