如何将底部浮动的非菜单内容添加到语义 UI 菜单答案

【问题标题】：how to add bottom floated non-menu content to semantic-ui menu如何将底部浮动的非菜单内容添加到语义 UI 菜单
【发布时间】：2016-11-29 00:28:00
【问题描述】：

我正在使用语义 UI（通过 react-semantic-ui）。我想在我的菜单栏底部有一个小区域用于登录。

我有这个：

我想要这个：

我使用position: absolute; bottom: 0 完成了上述操作，但我打赌有一个语义定位类或react-semantic-ui 组件可以使用它来实现它而无需手动样式

我的组件如下：

  <Menu vertical fixed={'left'} inverted>
    <Menu.Item name='account' active />
    <Menu.Item name='settings' active={false} />
    <Menu.Menu>
      <img width="50px" height="50px" style={{ backgroundColor: 'red' }} />
      <Menu.Item name='logout' active={false} onClick={() => null} />
    </Menu.Menu>
  </Menu>

【问题讨论】：

语义 UI 有“底部对齐内容”类，它应该做你想做的事。 semantic-ui.com/views/item.html
嘿@IlanHasanov，感谢您提供的信息。我很难实施它。在您的链接中，所有内容都包含在 items 组中。但是，项目组不会垂直扩展以填充空间，因此我的小红框节点被卡住了。此外，verticalAlign 似乎适用于项目中的内容，而不是项目组中的项目。有什么想法吗？谢谢！
然后使用自定义 css..

标签： javascript css reactjs semantic-ui semantic-ui-css

【解决方案1】：

我会使用Segment element。 attached 道具是您会发现最有用的东西，您可以轻松地将其自定义为完整菜单。

<Segment attached='bottom'></Segment>

您应该能够轻松地对其进行自定义以满足您的风格需求。

【讨论】：

嘿蔡斯！谢谢你的提示！ Segment 在我使用的卡片周围添加了一个漂亮的小包装——谢谢！不幸的是， attach='bottom' 实际上并没有把它放到菜单的底部。这是一个live example: ，here's the source 用于该示例