부트 스트랩 3에서 col - * - 12 (col-xs/col-sm/etc) 사용

Question

StackOverflow의 코드 예제 및 판매용 테마 (Bootstrap의 예를 들어 본 적이 없습니다. 모두 부트 스트랩 자신의 문서와 상식에 따라 전체 폭 단일 열에 대한 잘못된 때문에

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <p>Words go here</p> 
    </div> 
    </div> 
    </div> 

또는

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <p>Words go here</p> 
    </div> 
    </div> 
    </div> 

그것은 나 너트 구동한다.

때 당신은 실제로 그리드 시스템을 사용합니까? col-*-12은 언제 출전할까요?

Answer 1

무언가가 전체 너비이면 전혀 필요하지 않습니다.

알아보기 : 당신이 전체 너비로하여 열을 원하는 경우

<div class="container"> 

     <p>Words go here</p> 

     </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class --> 

, 그것은 마지막으로 아래에있을 것입니다 : http://getbootstrap.com/examples/grid/

위의 예제 모두에 대한 올바른 HTML이있다 당신이 사용한 컬럼 클래스. 다음은 전체 너비가 시작되는 곳 아래의 전체 너비입니다 (따라서 Bootstrap 3.x의 기본 다운로드에서 767px 및 UNDER).

<div class="row"> 
    <div class="col-sm-4"> 
    Stuff 
    </div><!-- /.col-sm-4 --> 
    <div class="col-sm-8"> 
    Stuff 
    </div><!-- /.col-sm-8 --> 
</div><!-- /.row --> 

는 외부 .container 또는 .container 유체 (너비를 변경하지 않는 내용의 그룹 당 하나)를 잊지 마세요. .container 또는 .container-fluid는 .row의 음수 여백을 0으로 만들 수 있으므로 수평 스크롤 막대가 표시되지 않습니다. * - - 12 편리

이

<div class="row"> 
    <div class="col-sm-6 col-md-12"> 
    Stuff 
    </div><!-- /.col-sm-6 col-md-12 --> 
    <div class="clearfix visible-md"></div> 
    <div class="col-sm-6 col-md-4"> 
    Stuff 
    </div><!-- /.col-sm-6 col-md-12 --> 
</div><!-- /.row --> 

어쨌든, COL은 :

따라 상황을 사용 COL - - * 당신은 작은 열 클래스의 최소 폭 AFTER 전체 폭을 원하는 위치에 12입니다 특히 중첩 된 상황에서

Answer 2

귀하의 좌절감은 맞습니다. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">은 완전히 중복되었습니다.

부트 스트랩 3+가 가장 먼저 모바일이므로 선언 한 모든 클래스는 선언 된 장치 (xs, sm, md, lg) 이상에 적용됩니다. 따라서 col-xs-12 col-sm-12은 중복됩니다. 동일한 효과로 col-xs-12을 사용하면됩니다.

또한 xs 클래스를 선언하지 않으면 레이아웃은 선언 한 smalles col-class 아래에서 col - * - 12로 기본 설정됩니다. 예 : <div class="col-sm-6">은 반 폭이 sm 이상이며 최대는 xs입니다. 반면 <div class="col-md-6">은 반값 폭이 md 이상이고 전체 너비는 sm 및 xs입니다.

이렇게 말하면 적어도 하나 이상의 col 클래스를 선언해야합니다. 따라서 관련 패딩 및 기타 스타일 지정을 얻습니다.