Bootstrap 4: Menu thả xuống đang ở bên phải màn hình

Question

Tôi không thể nhận được các mục thả xuống để không rời khỏi trang. Tôi đã thử một vài điều từ BS3 nhưng họ dường như không hoạt động. Tôi không chắc chắn nếu nó vì ml-tự động. (Bỏ qua những điều khoản khác nếu-)

Heres 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 đã được tích hợp sẵn: Xem Menu Alignment. Chỉ cần thêm lớp dropdown-menu-right vào số dropdown-menu div.

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

làm việc Ví dụ:

.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

Trong tấm phong cách của bạn, cho .dropdown-menu thay đổi left: 0;-right: 0;.