スタック可能なメニューのすぐ隣に要素を配置

Question

私はセマンティックUIから始めて、"Jumbotron" at Semantic UI Forestのようなテーマを作成したいと考えています。

主な相違点は、ナビゲートメニューを反応的にして、stackableクラスを追加しました。画面サイズを変更するとメニュー自体が積み重ねられますが、「ジャンボトロン」は表示されません。 jumbotronをどちらのモードでもナビゲーションバーのすぐ隣に配置し、積み重ねたり、積み重ねたりしてください。

example on codepen.ioとこのスクリーンショットをご覧ください。赤い部分は常にメニューの下に揃えます。

私はここで何が欠けていますか？

Answer 1

Codepen例とセマンティックUIジャンボトロン例は、ほぼ同一です。違いは、2.5 emの余白を持つui.grid.rowのインラインCSSを見逃していることです。それは大量のメッセージの行をシフトさせます。

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

このソリューションでは、悪い行に対して6em margin-topが必要です。デスクトップ上では、メニューとジャンボトロンのコンテナの間に余裕があります。携帯電話ではより少ない。もう1つの解決策は次のとおりです。

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

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