可以设置下拉的位置（zurb基金会）？

Question

现在，下拉列表的内容默认为右下角。

是否可以选择将其设置为左下角？

（基础5）

Answer 1

通过JS应用“正确”的风格。要覆盖它，只需给#contentDrop一种#contentDrop{left: -100px !important;}样式或任何你想要左边的值。您需要调整.f-dropdown:after{left:XXpx !important;}和.f-dropdown:before{left:XXpx !important;}样式，将小三角形置于下拉框的右侧。

Answer 2

这是一个黑客攻击，因为Zurb-Foundation仍在努力解决这个问题。有一个github issue与此相关。我找到了Hack here来帮助我解决它。

此处使用此信息是如何使对齐正确的。将内容bottom-align-left添加到内容下拉列表div：

<a href="#" data-options="align:bottom" data-dropdown="drop2">Search</a>
<div id="drop2" data-dropdown-content class="f-dropdown bottom-align-left">

然后将其添加到CSS或SCSS文件中。您必须使用该数字才能使其正确。

.bottom-align-left {
    margin-left: -375px;
}

现在三角形显示在错误的位置。要解决此问题，请删除三角形。

• 打开_settings.scss。
• 查找$f-dropdown-triangle-size并将其设为0px，即 $f-dropdown-triangle-size: 0px;