中央整列ブートストラップ4のドロップダウンコンポーネントが正しく動作しない

Question

私はこのanswerを見直しました。私の最終目標（CSSを調整すること）を達成するのに役立ちますが、私の質問はブートストラップが提供したコンポーネントとスタイリングに関するものです。

問題：ドロップダウンボタンは必要に応じて整列されますが、ドロップダウンメニューの位置がずれています。小さなデバイスやタブレットのサイズを確認するには、ウィンドウのサイズを変更してみてください。

col-sm-12を変更して列数を変更すると、少しでも役立ちますが、小さなデバイスでも不揃いが残ります。

ここ、最小限の完全かつ検証可能です：JsFiddle Example

<div class="container-fluid"> 
     <div class="row justify-content-center text-center"> 
      <div class="col-sm-12 align-self-center"> 
       <div class="dropdown"> 
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Select Category 
        </button> 
        <div class="dropdown-menu" 
         aria-labelledby="dropdownMenuButton"> 


          <a class="dropdown-item" href="#">Category1</a> 
          <a class="dropdown-item" href="#">Category2</a> 
          <a class="dropdown-item" href="#">Category3</a> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 

私たちは整列をセンタリングするための2つのクラス -

justify-content-center： https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

text-center：https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

は、

質問：

1. 上記のクラスは、ドロップダウンメニューにだけドロップダウンボタンには適用されませんなぜ？
2. 私はそのミスアライメントを修正するために欠けている便利なブートストラップ4スタイリングクラスがありますか？

Answer 1

あなたのドロップダウンメニューが絶対的に配置されているためです - あなたはそれがスタイルだ上書き中央にではなく、左にそれを配置する必要があります。

.justify-content-center .dropdown-menu { 
    left: 50%; 
    transform: translateX(-50%); 
} 

Updated fiddle