English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
에서 예제: 가로 스택 에서는 기본 그리드 시스템을 살펴보았습니다. 여기서는 2 개의 div를 중앙에 배치합니다. 50%/50% 분할:
<div>....</div> <div>....</div>
하지만, 대형 장치에서는 최종 설계로 33%/66%. 따라서 우리가 해야 할 것은 퍼지점에서 열의 너비를 변경하도록 준비하는 것입니다:
<div>....</div> <div>....</div>
에서 찾습니다. md 의 클래스를 사용하고 있습니다. 대형 장치에서는 lg 의 클래스를 사용하고 있습니다. 이 예제에서 우리는 2 개의 div가 50%/50% 분할로 변환됩니다 33%/66%. 아래의 예제를 확인하여 확인하십시오. (여기서 각 열에 대해 스타일을 정의했습니다. 이렇게 하지 않는 것이 좋습니다.)
!DOCTYPE html> <html> <head> <title>Bootstrap 예제 - 중형 및 대형 장치</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>헬로, 월드!<!/h1> <div class="row"> <div class="col-md-6 col-lg-4" 스타일="배경-컬러: #dedef8; 박스-셔도: 인셋 1픽스 -1픽스 1픽스444, 인셋 -1픽스 1픽스 1픽스444"> <p> 로렘 이플럼 돌로렘 시 아멧, 연결된 아드립시스 엘리트, 세드 도 에우스 모드 테미르 인시던트 우트 라보레스 에트 돌로레스 망나 알리카. 윗 에니미 애드 미니 머니엠, 퀸 노스트루드 익사릭시온 얼람코 라보레스 니시 퀘 알리키푸 엑스 이아 에아 커모도 콘세쿠움트. </p> <p> 세드 유니스 페르스피시아티스 언드 오미니스 이스테 이스테 나투스 에러르 시 볼루테타맨 알쿠사스 델로렘쿠 레우단티움, 토타 렘 아페리엠, 이케 이사 파에 �ου에 아비로 인벤토레 베리타스 에트 쿼이 아르키텍토르 베아타에 비타에 딕타 슈언트 엡리카보. </p> </div> <div class="col-md-6 col-lg-8" 스타일="배경-컬러: #dedef8;박스-셔도: 인셋 1픽스 -1픽스 1픽스444, 인셋 -1픽스 1픽스 1픽스444"> <p> 세드 유니스 페르스피시아티스 언드 오미니스 이스테 이스테 나투스 에러르 시 볼루테타맨 알쿠사스 델로렘쿠 레우단티움. </p> <p> 네게 포로 퀴콰 콰콰 이스, 돌로렘 이플럼 퀘아 돌로렘 시 아멧, 연결된, 아드립시스 벨리트, 세다 퀘아 노넘 이우스 모디 tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </div> </body> </html>테스트를 보세요.‹/›
결과는 다음과 같습니다: