맞춤형 부트 스트랩 그리드를 만드는 방법은 무엇입니까?

Question

는이 같은 사용자 정의 부트 스트랩 그리드를 만들려고하지만 결과는 좋지 않다 :

이 그리드입니다 내가 만들고 싶어 :

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-3 box-area"> 
     <p>text</p> 
    </div> 
    <div class="col-sm-9 slide-area"> 
    </div> 
    </div> 
</div> 

Answer 1

부트 스트랩의 그리드 시스템을 반응 적이다. 기본적으로이 그리드는 화면 크기가 다른 장치에서 끊임없이 변형됩니다. 따라서 데스크톱과 같은 대형 화면에서 작업하는 경우 화면 크기가 작은 다른 장치를 처리해야합니다.

그리드 시스템이 작동하는 방법에 대한 기본 사항에 대해 논의 하겠지만, 당신이 원하는 것의 코드를 작성하지는 않을 것입니다.

주요 중단 점

장치의 화면 크기에 관한 미디어 쿼리입니다.

• < 768px 화면 크기 - 추가 소형 ​​장치 (전화기).
• 768px 화면 크기 - 소형 장치 (태블릿).
• 992px 화면 크기 - 중간 장치 (데스크톱)
• 1200px 화면 크기 - 대형 장치 (대형 데스크탑).

전화 미만 768px 화면 크기를 가진 사람, 그래서 그것은 ... 여분의 작은 장치로

클래스 접두사

클래스 접두사로 간주된다 그리드 생성에 사용되는 모든 키 중단 점을 가리키고 있습니다.

• col-xs - 엑스트라 스몰 (XS - < 768px)
• col-sm - 소형 (SM - 768px)
• col-md - 중간 (MD - 992px)
• col-lg - 대형 (LG - 1200 픽셀)

그리드 시스템으로 만들 수있는 전체 12 개의 열이 있습니다. 이 열 자체는 클래스 접두사로 나뉘어 나타나는 화면 크기에 따라 나눌 수 있습니다.

예 : 중간 장치 화면에 콘텐츠를 3 열로 나누어 표시하고 싶습니다. 이 경우 접두사를 사용하고을 웹 페이지에서 3으로 분리하려면 전체 12 열을 3으로 나누기 때문에 클래스 접두어에 4를 추가해야합니다. 부분품. 그러면 수업은 col-md-4이 될 것입니다.

부트 스트랩의 에서이 모든 내용을 일부 예제를 통해 자세히 읽을 수 있으므로 사용 방법을 완전히 이해할 수 있습니다.