2013-10-06 2 views
2

저는 현재 부트 스트랩 발판/그리드 시스템을 사용하고 있습니다 : 당신은 내가이 비에 사라집니다 너무 insta-shop-filter에 가시 바탕 화면을 추가 볼 수 있듯이목재 및 그리드 시스템

<div class="row-fluid"> 
    <div id="insta-shop-filter" class="span2 visible-desktop"> 

    </div> 
    <div id="insta-shop-grid" class="span10"> 

    </div> 
<div> 

데스크톱. 그러나 내가 원하는 것은 insta-shop-gridspan12을 갖기를 원했기 때문에 전체 너비가 필요하다는 것입니다. javascript/jQuery를 사용하지 않고 창 이벤트를 수신하지 않고도이 작업을 수행 할 수있는 방법이 있습니까?

답변

0

CSS3 미디어 쿼리를 사용하여 다른 장치에서 스타일을 전환 할 수 있습니다. 이 경우, 다음과 같은 것을 수행하는 640 또는 480 픽셀 장치 폭을 기반으로 미디어 쿼리를 작성하는 것이 좋습니다 :

@media screen and (max-device-width:640px){ 
    #insta-shop-filter{ 
    display:none; 
    } 
    #insta-shop-grid{ 
    width:640px!important; 
    } 
} 

하나의 작은 노트 여기 사용하여 중요한 권장하지 않습니다!.

+0

어떻게 클래스를 span10에서 span12로 변경합니까? 그게 내가 원하는 것인데 – adit

+0

이 아니기 때문에 span10에서 너비 속성을 덮어 쓰게되어 너비가 10/12가 아닌 전체 너비가된다. – Conqueror

0

부트 스트랩 2 (사용하고있는 것으로 보입니다)에서 사용자 정의 CSS 미디어 쿼리 (@Conqueror가 제안한)를 사용하여 스타일을 덮어 쓰지 않고이 작업을 수행하는 쉬운 방법이 없다고 생각합니다. 자바 스크립트.

그러나 이것은 단지 col-SIZE-SPANdocumented here으로 사용하여 Bootstrap3에 구워 졌음을 지적하고자합니다. 당신의 경우에 그것은있을 것입니다.

<div class="row-fluid"> 
    <div id="insta-shop-filter" class="col-md-2 hidden-sm"> 

    </div> 
    <div id="insta-shop-grid" class="col-md-10 col-sm-12"> 

    </div> 
<div> 
관련 문제