2017-10-23 8 views
0

navbarとnavtbarの右側にフローティングされたリンクbtnがあります。リンクbtnがドロップダウンをトリガーします。ビューポートの右側にドロップダウンを開いて固定したいと思います。ドロップダウンが開かれると、現在、ビューポートの右側を超えて半分隠されています。ドロップダウンメニューの右のクラスがドロップダウンメニューdivに追加されていても。NavbarのBootstrap(4.0)ドロップダウンがビューポートに対して右に配置できません

<div class="collapse navbar-collapse"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
       <a class="btn btn-primary align-middle" href="/Home">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="btn btn-default align-middle" href="#link1">link1</a> 
      </li> 
      <li class="nav-item"> 
       <a class="btn btn-default align-middle" href="#link2">link2</a> 
      </li> 
      <li class="nav-item"> 
       <a class="btn btn-default align-middle" href="#link3">link3</a> 
      </li> 
     </ul> 
     <div class="form-inline my-2 my-lg-0"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Try it free</button> 
      <span>&nbsp; or &nbsp;</span> 
      <div class="dropdown"> 
       <a class="text-primary btn-link btn" href="#" id="loginMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-shield" aria-hidden="true"></span> Login</a> 
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="loginMenu"> 
        <form class="px-4 py-3"> 
         <div class="form-group"> 
          <label for="exampleDropdownFormEmail1">Email address</label> 
          <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]"> 
         </div> 
         <div class="form-group"> 
          <label for="exampleDropdownFormPassword1">Password</label> 
          <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> 
         </div> 
         <div class="form-check"> 
          <label class="form-check-label"> 
           <input type="checkbox" class="form-check-input"> 
           Remember me 
          </label> 
         </div> 
         <button type="submit" class="btn btn-primary">Sign in</button> 
        </form> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item" href="#">New around here? Sign up</a> 
        <a class="dropdown-item" href="#">Forgot password?</a> 
       </div> 
      </div> 
     </div> 
    </div> 

可能であれば、望ましい効果を得るためにブートストラップクラスを使用できます。メニューが折りたたまれているので、カスタムスタイルを追加する必要があります。これは、ドロップダウントリガーリンクボタンを左に押します。この場合、ドロップダウンがビューポートの右側にまだ開いていることを希望します。なぜドロップダウンメニューの権利が全く機能していないのかを理解することに興味がありますか?ありがとう!

答えて

関連する問題