ブートストラップ4 - ナビゲーションバーのドロップダウンリストを右揃えにするにはどうすればよいですか？

Question

私はブートストラップ4で構築されたWebページを持っています。私のページには、私はnavbarを持っています。そのナビゲーションバーには、ユーザーがクリックできる設定アイコンがあります。設定アイコンは、ナビゲーションバーで右揃えになっています。クリックすると、設定フォームが表示されます。

このBootplyに示すように、設定フォームが表示されます。ただし、フォームはボタンと右揃えではありません。代わりに、設定は左から右に移動するように見えます。さらに、そこからの設定の内容は、私が期待しているように2つの列に均等に分配されていません。私は間違って何をしていますか？私のコードは次のようになります。

<div class="container"> 
    <nav class="navbar navbar-dark" style="background-color:orange;"> 
    <div class="row" style="width:100%;"> 
     <div class="col-10 offset-1"> 

     <div class="row"> 
      <div class="col-6"> 
      <h3 class="mb-0"><small class="text-muted">Dashboard</small></h3> 
      </div> 

      <div class="col-6 d-flex align-items-end"> 
      <ul class="list-inline navbar-nav d-inline ml-auto"> 
       <li class="list-inline-item nav-item dropdown"> 
       <button class="btn btn-secondary dropdown-toggle py-0 mb-0 float-right" aria-expanded="false" aria-haspopup="true" style="position:relative; top:4px; right:-16px;" type="button" data-toggle="dropdown"> 
        <i class="text-muted">cog</i> 
       </button> 

       <div class="dropdown-menu dropdown-menu-right" style="position:absolute;"> 
         <form class="p-3"> 
          <div class="row"> 
          <div class="col-6"> 
           <div class="form-group"> 
           <label for="filterLocation">Location</label> 
           <select class="form-control" id="form-control"> 
            <option>Chicago</option> 
            <option>New York</option> 
           </select> 
           </div>                
          </div> 

          <div class="col-6"> 
           <div class="form-group"> 
            <label for="filterTo">Via Date</label>         
            <input class="form-control mb-2 mb-sm-0" id="filterFromDate" type="text" placeholder="11.01.2017"> 
           </div> 
          </div> 
          </div> 
         </form> 

       </div> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div>    
    </nav> 
</div> 

Answer 1

はこれを使用してみてください：

<div class="dropdown-menu dropdown-menu-right float-right" style="position:absolute;"> 

の代わりに、この：

<div class="dropdown-menu dropdown-menu-right" style="position:absolute;"> 

"フロート・右の" CSSクラスが古い「プルライトです"クラスではありましたが、Bootstrap 4で、またBootplyが動作しないように変更しました。このような

Answer 2

何か作業をする必要があります：

<div class="dropdown-menu dropdown-menu-right" style="position:absolute; margin-left: 15px"> 

Answer 3

は、このコードを確認してください。列の問題をクリアします。

min-width:300px;を追加すると動作させることができます。

<div class="container"> 
 
    <nav class="navbar navbar-dark" style="background-color:orange;"> 
 
    <div class="row" style="width:100%;"> 
 
     <div class="col-10 offset-1"> 
 

 
     <div class="row"> 
 
      <div class="col-6"> 
 
      <h3 class="mb-0"><small class="text-muted">Dashboard</small></h3> 
 
      </div> 
 

 
      <div class="col-6 d-flex align-items-end"> 
 
      <ul class="list-inline navbar-nav d-inline ml-auto"> 
 
       <li class="list-inline-item nav-item dropdown"> 
 
       <button class="btn btn-secondary dropdown-toggle py-0 mb-0 float-right" aria-expanded="false" aria-haspopup="true" style="position:relative; top:4px; right:-16px;" type="button" data-toggle="dropdown"> 
 
        <i class="text-muted">cog</i> 
 
       </button> 
 

 
       <div class="dropdown-menu dropdown-menu-right" style="position:absolute;min-width:300px;"> 
 
         <form class="p-3"> 
 
          <div class="row"> 
 
          <div class="col-6"> 
 
           <div class="form-group"> 
 
           <label for="filterLocation">Location</label> 
 
           <select class="form-control" id="form-control"> 
 
            <option>Chicago</option> 
 
            <option>New York</option> 
 
           </select> 
 
           </div>                
 
          </div> 
 

 
          <div class="col-6"> 
 
           <div class="form-group"> 
 
            <label for="filterTo">Via Date</label>         
 
            <input class="form-control mb-12 mb-sm-0" id="filterFromDate" type="text" placeholder="11.01.2017"> 
 
           </div> 
 
          </div> 
 
          </div> 
 
         </form> 
 

 
       </div> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>    
 
    </nav> 
 
</div>