Bootstrap 4: Menu thả xuống sẽ xuất hiện ở bên phải màn hình

Tôi dường như không thể làm cho các mục thả xuống không đi ra khỏi trang. Tôi đã thử một vài thứ từ BS3 nhưng chúng dường như không hoạt động. Tôi không chắc liệu nó có phải do ml-auto hay không. (bỏ qua các câu lệnh if-else)

Đây là 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>

Bootstrap đã tích hợp sẵn tính năng này: Xem Căn chỉnh menu . Chỉ cần thêm dropdown-menu-rightlớp vào dropdown-menudiv.

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

Ví dụ làm việc: (mở Toàn trang)

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

Trong bảng kiểu của bạn, để .dropdown-menuthay đổi left: 0;thành right: 0;.

Vì lợi ích của những người gặp phải vấn đề này khi googling nhưng đang sử dụng react, câu trả lời được chấp nhận (trong khi đúng) sẽ không giải quyết được vấn đề cho bạn. React bỏ qua 'dropdown-menu-right' khi bạn thêm nó theo cách thủ công vào className. Thay vào đó, hãy cập nhật mã của bạn thành mã bên dưới và nó đặt đúng lớp cùng loại.

Đối với javascript

<DropdownMenu right>

Đối với bảng chữ

<DropdownMenu right={true}>

Đưa nó vào đây vì chủ đề này xuất hiện khi tôi đang truy cập vấn đề và tôi đã mất khá nhiều thời gian để tìm ra giải pháp chính xác cho bootstrap 4 trong phản ứng (reactstrap).

Tôi đã xem qua mã của bạn và tôi nghĩ câu trả lời được chấp nhận giải quyết một vấn đề khác. Nếu menu di chuyển sang trái hoặc phải của trang và không ở dưới nút, đó là do bạn đang thiếu lớp cha.btn-group và có vẻ như lớp .dropdown-togglevà của bạn .dropdown-menuđang ở sai phần tử. Đây là ví dụ cơ bản nhất từ ​​tài liệu 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>

Tôi chỉ xem qua một khối nhỏ mã của bạn, nhưng ở cuối nơi bạn có menu thả xuống trên màn hình lớn, tôi đã tập trung vào điều này.

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

đến

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