재단 이미지는 모바일 버전으로 만 표시됩니다.

Question

큰 12 개의 클래스는 대형 화면에서만 볼 수 있습니다. 모바일 에서처럼 크기를 줄이면 다른 클래스를 할당하지 않으면 아무 것도 표시되지 않습니다.

이제이 코드를 사용하면 큰 화면에서 모바일 12 및 대형 12를 표시합니다. 잘.

  <div class="large-12 columns"> 
       <div class="panel"> 
             <img src="design/images/nationalskills_logo.png" /> 
             <img src="design/images/toyota_logo.png" style="float: right;"/> 
       </div> 
      </div> 
      <div class="small-6 columns"> 
       <div class="panel"> 
             <img style="width: 30%;" src="design/images/nationalskills_logo.png" /> 
             <img style="width: 30%;" src="design/images/toyota_logo.png" style="float: right;"/> 
       </div> 
      </div> 
        </div> 

 <div class="row"> 

누구 나 좀 도와 주시겠습니까. 큰 화면에는 큰 -12 div를, 큰 화면에는 작은 화면에서만 작은 -6을 표시하려고합니다. 내 코드가 잘못되었습니다.

Answer 1

12 클래스는 대형 화면에서만 물건을 보여줍니다. 내가 모바일에 같은 크기를 줄일 경우 내가 다른 클래스 작은 12 " 를 지정하지 않는 한이 가정은 단지 사용 교환 옵션의 크기를 조정 다큐먼트 이미지 http://foundation.zurb.com/docs/components/grid.html

를 참조 완전히 잘못 아무것도 표시되지 않습니다. http://foundation.zurb.com/docs/components/interchange.html

크기에 따라 다른 클래스 정의를 숨기는 하나의 div에서 coloumns에 대해 다른 크기 클래스를 사용할 수 있습니다.

<div class="row"> 
<div class="small-6 large-6 columns"> 
<div class="panel"> 
    <img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" /> 
<img class="right" data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" />       
</div> 
</div> 
</div>