javascript - 语义 UI 弹出式流体标签在 UI 元素类中不起作用

Question

我正在尝试创建一个弹出式菜单，很像 docs 中的示例，但是如果我将弹出窗口包装在 ui item 类和菜单类中，fluid 属性将停止工作。相反，弹出窗口与按钮一样宽。

我需要 ui item 类来使我的菜单元素正确排列，所以我正在寻找解决方法以保持流体属性(或获得等效效果) 菜单和元素类都已就位。

我的代码看起来有点像这样(混合了一些额外的元素，但这段代码足以重现错误):

<div class="ui menu">
<!-- Removing ether menu above, or item below will cause the fluid tag to work -->
  <div class="ui item">

    <div class="ui button">
      hi
    </div>
    <div class="ui fluid popup">
    <!-- fluid class currently has no effect -->
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>

还有一个有效的 jsfiddle:

http://jsfiddle.net/hb54c7r0/7/

Answer 1

问题是流体占用了元素容器的宽度，正如我在这里解释的那样:

https://github.com/Semantic-Org/Semantic-UI/issues/5029

解决方案是在元素外部声明弹出窗口并显式指向它，而不是使用内联。