语义 UI 下拉菜单 - 如何将其定位在开头 link 的左侧？

Question

我想打开 link 打开下拉菜单左侧的下拉菜单，这样它在像 iPhone 这样的小屏幕上可见。有一些标准的方法吗？

这是我的下拉列表定义 - 最好能有一些设置 (class) 告诉下拉列表向右对齐，而不是与 link 向左对齐。

<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 class 来实现。

您可以在此处找到一个 JSFiddle 示例：http://jsfiddle.net/ypvpajrL/

来源：https://github.com/Semantic-Org/Semantic-UI/issues/3645

Answer 2

在菜单旁边添加此样式 class

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>

语义 UI 下拉菜单 - 如何将其定位在开头 link 的左侧？

Semantic UI dropdown - how to position it to the left of the opening link?

css

semantic-ui