セマンティックUIのドロップダウン - オープニングリンクの左に配置する方法

Question

私は、ドロップダウンを開くリンクの左にドロップダウンを開きたいので、iPhoneのような小さな画面で見ることができます。それを行ういくつかの標準的な方法はありますか？

ここに私のドロップダウンの定義です - いくつかの設定（クラス）を取得するのはいいですね。

<div class="four wide mobile three wide computer column"> 
    <div class="ui compact dropdown doNotClose"> 
     <i class="dropdown icon"></i> 
     <span class="ui tiny header">Filters</span> 
     <div class="menu"> 
      <div class="item"> 
       <div class="ui toggle checkbox"> 
        <input type="checkbox" checked> 
        <label>Acknowledge</label> 
       </div> 
      </div> 
      <div class="item"> 
       <div class="ui toggle checkbox"> 
        <input type="checkbox" checked> 
        <label>Active</label> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ドロップダウンにpointingクラスを追加することによってそれを行うことが可能です。

あなたはここにJSFiddle例を見つけることができます：http://jsfiddle.net/ypvpajrL/

出典：https://github.com/Semantic-Org/Semantic-UI/issues/3645

Answer 2

メニュークラスの隣に

style="right: 0;left: auto;" 

例をこのスタイルを追加します。

<div class="ui simple dropdown icon button" style="margin:0;"> 
     <i class="calendar icon"></i> 
      Date 
     <div class="menu" style="right: 0;left: auto;"> 
     <a class="ui item">Today</a> 
     <a class="ui item">Yesterday</a> 
     </div> 
    </div>