뼈 (Bones) 테마에서 격자가 작동하지 않습니다.

저는 Themble에서 Bones 테마를 사용하고 있습니다. Themble에는 그리드 시스템이 포함되어 있습니다. 내 메뉴 항목의 머리글에이 기능을 구현하여 모바일 크기의 아이콘으로 크기를 조정하고 데스크톱 화면에 전체 메뉴를 표시하려고했습니다.뼈 (Bones) 테마에서 격자가 작동하지 않습니다.

문제는 그리드를 작동시킬 수 없다는 것입니다. 모든 메뉴 항목은 모든 화면 크기에서 서로 옆으로 띄웁니다. divs 'menubar'는 아이콘만큼 커야합니다.

그리드는 사이드 바 및 컨텐트 영역과 같은 다른 영역에서 작동합니다. 나는 반응 형 컬럼에 익숙하지 않아서 여기에있는 전문가들에게는 분명히 분명하다.

아시다시피 저는 Sass 용 프로세서 인 코알라를 사용하여 로컬로 작업하고 있습니다.

헤더

<body <?php body_class(); ?>> 

    <div id="container"> 

     <header class="header" role="banner"> 

      <div id="inner-header" class="wrap "> 


        <div id="logo" class="menubar m1of5 t1of5 d2of6 cf"> 
         <a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a> 
        </div> 

        <div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf"> 
         <a href="#"><img src="/icon.png"/></a> 
        </div> 

        <div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf"> 
         <a href="#"><img src="/icon.png"/></a> 
        </div> 

        <div id="menu-icon" class="menubar m1of5 t1of5 d1of6 cf"> 
         <a href="#"><img src="/icon.png"/></a> 
        </div> 

        <div id="menu-icon" class="menubar m1of5 t1of5 d1of6 last-col cf"> 
         <a href="#"><img src="/icon.png"/></a> 
        </div> 

       </div> 

     </header>

그리드

@mixin grid-col { 
float: left; 
padding-right: 0.75em; 
} 

// the last column 
.last-col { 
    float: right; 
    padding-right: 0 !important; 
} 

@media (max-width: 767px) { 

.m-all { 
@include grid-col; 
width: 100%; 
padding-right: 0; 
} 

.m-1of5 { 
@include grid-col; 
width: 20%; 
} 

} 
And on and on for other sizes and screens.

스타일

This is the mobile styling.... 

.header { 
width:100%; 
position: fixed; 
background-color: $white; 
border-bottom: 2px solid $border-color; 
} 

.menubar { 
float: left; 
} 

#logo { 
font-size: 0px; 
a { 
text-decoration: none; 
    } 
    } 

#menu-icon { 
background-color: $light; 
border-radius: 4px; 
    }

출처

2014-07-11 user3827592

<div id="logo" class="menubar m1of5 t1of5 d2of6 cf"> 
    <a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a> 
</div>

클래스 이름을 하이픈으로 연결해야합니다 :

<div id="logo" class="menubar m-1of5 t-1of5 d-2of6 cf"> 
    <a href="<?php echo home_url(); ?>"><img src="/home_icon.png">homepage</a> 
</div>

출처

2014-10-22 18:38:53 Steve

뼈 (Bones) 테마에서 격자가 작동하지 않습니다.

답변

관련 문제