쌓을 수있는 메뉴 바로 옆에 요소 배치

Question

필자는 시맨틱 UI로 시작하여 "Jumbotron" at Semantic UI Forest과 비슷한 테마를 만들고 싶습니다.

가장 큰 차이점은 navigtaion 메뉴의 응답 성을 높이기 위해 stackable 클래스를 추가했기 때문입니다. 화면 크기를 변경하면 메뉴 자체가 쌓이지 만 "점보트론"은 숨겨집니다. jumbotron을 탐색 모드 바로 옆에 위치 시키거나 쌓거나 쌓지 않게합니다.

example on codepen.io 및이 스크린 샷을 확인하십시오. 빨간색 영역은 항상 메뉴 아래에 정렬됩니다.

무엇이 여기에 있습니까?

Answer 1

Codepen 예와 시맨틱 UI 대형 기기로서는 거의 동일하다. 차이점은 ui.grid.row에 인라인 CSS가 2.5 개 밖에없는 것을 놓쳤다는 것입니다. 거대한 메시지 행을 아래로 이동합니다.

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

이 솔루션을 사용하면 행에 6em margin-top이 필요합니다. 데스크탑에서는 메뉴와 점보트론 컨테이너 사이에 너무 많은 공간이 있습니다. 휴대 전화는 적습니다. 또 다른 해결책은 다음과 같습니다 :

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

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