Twitter Bootstrap 모바일 전용 열

Boostrap에서 '모바일 전용'열을 만들 수 있습니까? 즉 4의 행은 작은 화면에서 2의 행이됩니다 (3 * span4가 2 * span6?가됩니다). .hidden-phone을 추가하여 모바일 용 요소를 숨길 수 있다는 것을 알고 있습니다.Twitter Bootstrap 모바일 전용 열

Zurb Foundation에는 phone-two 등이 있습니다. http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-

이렇게하려면 내 미디어 쿼리를 작성해야합니까?

출처

2013-03-25 timhc22

CSS를 통해 단순히 HTML 스타일을 변경하는 대신 HTML을 변경하는 것에 대해 미디어 쿼리가 도움이되지 않습니다. 위에서 언급 한 부트 스트랩 '숨겨진'클래스를 사용하여 더 큰 장치에서 일부 콘텐츠를 숨기고 더 작은 장치에 표시 할 수 있습니다. 그러나 이는 두 가지 콘텐츠 집합이 다운로드되어 표시되거나 숨겨 짐을 의미합니다. –

것은 기초가 'phone-two'이며 부트 스트랩이 비슷한 것을 가지고 있는지 궁금합니다 : http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation- – timhc22

부트 스트랩에는 요청한 클래스에 해당하는 빌드가 없습니다. 이 얻을 한 정도로입니다

@media (max-width: 767px) { 
.row-fluid.phone-two .span3 { 
width: 48%; 
margin-left: 4%; 
float:left; 
} 
.row-fluid.phone-two > .span3:nth-child(odd){ 
margin-left: 0; 
} 
}

HTML을 http://jsfiddle.net/panchroma/g6PRS/

CSS

<div class="container"> <div class="row-fluid phone-two"> <div class="span3"> span3 </div> <div class="span3"> span3 </div> <div class="span3"> phone-two span3 </div> <div class="span3"> span3 </div> </div> </div>

희망 : 여기
은 당신이 당신의 자신의 작성하려는 경우 시작하는 생각입니다 가!

출처

2013-03-25 15:43:36

감사합니다. 그거 줘! – timhc22

빠른 업데이트 부트 스트랩 3은 이제 여기에서 수행하려는 작업을 지원합니다.

예컨대

<div class='row'> 
    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 

    <div class='col-xs-3 col-md-6'> 
    </div> 
</div>

havent 한이 테스트 만 작동합니다. 모바일에서는 2 개의 열을, 데스크톱에서는 4 개의 열을 표시해야합니다. 추가 정보 http://getbootstrap.com/css/#grid

출처

2013-12-11 08:59:34

Twitter Bootstrap 모바일 전용 열

답변

관련 문제