부트스트랩 5열 그리드 - 아임웹 전문가찾기

웹팁

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

부트스트랩 5열 그리드

2017.12.20 05:02 조회 수

489

이온디

첨부파일 https://imweb.eond.com/coding/395372

부트스트랩의 그리드 시스템은 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/

Total 16 articles in 1 / 1 pages

	제목	날짜
	코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)	2018/01/03
	jQuery를 배울수 있는 동네들입니다.	2013/08/09
	관련 링크 [1]	2010/05/23
16	[부트스트랩] 기본 부트스트랩 템플릿	2013/02/24
15	[부트스트랩] 부트스트랩의 아이콘 지원 브라우저	2013/02/25
14	[부트스트랩] #1 부트스트랩이란?	2013/03/01
13	[부트스트랩] #2 부트스트랩의 특징 [1]	2013/03/04
12	[부트스트랩] New Bootstrap 4 alpha	2015/08/27
11	[부트스트랩] [부트스트랩UI] http://lambdathemes.in/	2015/12/18
10	[부트스트랩] metronic_v4.5.2 UI bootstrap	2015/12/18
9	[부트스트랩] 부트스트랩에서 margin-top 은 어떻게 표현할까?	2016/06/05
8	[부트스트랩] 부트스트랩 커스텀 padding, margin	2016/06/05
7	[부트스트랩] 부트스트랩 COLLAPSE 아코디언 효과	2016/06/15
6	[부트스트랩] Admin & Dashboard	2016/06/22
5	[부트스트랩] 부트스트랩 유료테마	2016/06/22
4	[부트스트랩] [PSD] Responsive Bootstrap Grids	2016/06/22
3	[부트스트랩] [Bootstrap] 무료 부트스트렙 템플릿 사이트	2016/06/23
	[부트스트랩] 부트스트랩 5열 그리드	2017/12/20
1	[부트스트랩] Bootstrap 3 offset on right not left	2018/04/17