将元素直接放在可堆叠菜单旁边

Question

我刚开始使用语义用户界面，并希望创建一个类似于"Jumbotron" at Semantic UI Forest的主题。

主要区别在于我希望navigtaion菜单具有响应性，因此我添加了stackable类。当我更改屏幕尺寸时，菜单本身会堆叠，但它会隐藏“jumbotron”。我希望jumbotron直接位于导航栏的旁边，无论是模式，堆叠还是非堆叠。

请查看example on codepen.io和此屏幕截图。红色区域应始终在菜单下方对齐。

我在这里缺少什么？

Answer 1

Codepen示例和语义UI Jumbotron示例几乎完全相同。区别在于你错过了ui.grid.row上的内联css，其中有2.5 em的边距。它将大量消息的行向下移动。

  .ui.grid.message .row {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
  } 

使用这个解决方案，你需要6em margin-top来排除坏事。在桌面上，菜单和jumbotron容器之间的空间太大。在手机上少。另一种解决方案如下：

<div class="ui top fixed stackable inverted massive menu" style:"position:relative !important;">

<div class="ui grid massive message" style:"margin-top:0em !important;">