모바일메뉴

EOND

검색
마이페이지
홈페이지제작솔루션 CMS WEB 툴팁 위키 지식인 CMS 포럼 경매모듈 질문•답변
HTML5/CSS3
글쓰기
-
가
+
[부트스트랩] 부트스트랩 5열 그리드
이온디
2017.12.20 05:02
435
2
https://eond.com/395372
object(HotopayModel)#884 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#883 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/395372/comment/465121" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(5) { ["category"]=> string(6) "327266" ["document_srl"]=> string(6) "395372" ["comment_srl"]=> string(6) "465121" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

부트스트랩의 그리드 시스템은 12개의 분할된 화면으로 레이아웃을 구성하는 것입니다.
5개씩 하려고 하면 안되는 부분이 있는데 이렇게 추가가 가능합니다.
.col-xs-15, 
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
패딩값은 10px이나 15px 이나 알아서 설정하세요.

.col-xs-15 { 
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

추가로 1/5 외에 2/5, 3/5, 4/5도 아래와 같이 추가가 가능합니다.

.col-xs-25 {
width: 40%;
float: left;
}

.col-xs-35 {
width: 60%;
float: left;
}

.col-xs-45 {
width: 80%;
float: left;
}

출처 
https://code.i-harness.com/ko/q/9e811c
https://blog.polarbits.co/2014/02/16/quick-tips-5-column-layout-with-twitter-bootstrap/

2
0

라이믹스는 이온디와 함께

목록
글쓰기 신고 스크랩

댓글 0

댓글작성칸으로
HTML5/CSS3
-
가
+
전체 웹표준 웹접근성 부트스트랩 반응형 웹 UI HTML5 jQuery Script CSS Meta Table Form 미분류 PHP Flash CGI DIV 웹폰트 크로스브라우징 위지윅에디터 svg 프레임워크 map swiperjs
1
글쓰기
메뉴닫기
profile
로그인 해주세요.
자유게시판 글쓰기 저장함 쪽지
전체글보기 인기글 인기멤버 태그

전체 게시판

닫기

마이페이지

로그인을 해주세요

네이버로 로그인
ID/PW찾기 회원가입