메뉴 보이기
Profile
이온디

2017.12.20

부트스트랩 5열 그리드

조회 수 52 추천 수 0
부트스트랩의 그리드 시스템은 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/

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
12 [팁] Bootstrap 3 offset on right not left profile 이온디 2018.04.17 33
[팁] 부트스트랩 5열 그리드 profile 이온디 2017.12.20 52
10 [UI] [Bootstrap] 무료 부트스트렙 템플릿 사이트 profile 이온디 2016.06.23 375
9 [PSD] [PSD] Responsive Bootstrap Grids profile 이온디 2016.06.22 252
8 [UI] 부트스트랩 유료테마 profile 이온디 2016.06.22 483
7 [UI] Admin & Dashboard profile 이온디 2016.06.22 81
6 [팁] 부트스트랩 COLLAPSE 아코디언 효과 profile 이온디 2016.06.15 174
5 [팁] 부트스트랩 커스텀 padding, margin profile 이온디 2016.06.05 90
4 [팁] 부트스트랩에서 margin-top 은 어떻게 표현할까? profile 이온디 2016.06.05 77
3 [UI] metronic_v4.5.2 UI bootstrap profile 이온디 2015.12.18 84
2 [UI] [부트스트랩UI] http://lambdathemes.in/ profile 이온디 2015.12.18 58
1 [소식] New Bootstrap 4 alpha profile 이온디 2015.08.27 159