bootstrap [CSS] 그리드 시스템

Notice

Recent Posts

Recent Comments

Link

Today

Total

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

관리 메뉴

알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

bootstrap [CSS] 그리드 시스템 본문

Web /bootstrap

bootstrap [CSS] 그리드 시스템

백곳 2017. 9. 6. 18:43

그리드 시스템

일단 간단한 샘플 코드를보면서 설명하는게 이해하기 좋을듯 합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	  <div class="row">
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		</div>
		<div class="row">
		  <div class="col-md-8">.col-md-8</div>
		  <div class="col-md-4">.col-md-4</div>
		</div>
		<div class="row">
		  <div class="col-md-4">.col-md-4</div>
		  <div class="col-md-4">.col-md-4</div>
		  <div class="col-md-4">.col-md-4</div>
		</div>
		<div class="row">
		  <div class="col-md-6">.col-md-6</div>
		  <div class="col-md-6">.col-md-6</div>
		</div>

  </body>
</html>

위 그림에서 보면 그리드에서 cod-md-1 최대 12열로 표현 합니다.

md-8 은 8개를 합친 것이고 md-4는 4개를 합친것입니다.

row은 줄을 의미하구요

부트 스트랩 공식 사이트에서 설명

부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다.

그리고 클래스 이름을 설정해는데 옵션을 설정 해줄수도 있습니다.

부트스트랩 공식 홈페이지에 나온 옵션 설명

그리드 옵션

다양한 기기들을 넘나드는 부트스트랩 그리드 시스템을 간단한 테이블로 살펴보세요.

	매우 작은 기기 모바일폰 (<768px)	작은 기기 태블릿 (≥768px)	중간 기기 데스크탑 (≥992px)	큰 기기 데스크탑 (≥1200px)
그리드 적용	항상	분기점보다 크면 적용
콘테이너 너비	없음 (auto)	750px	970px	1170px
클래스 접두사	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
컬럼 수	12
컬럼 너비	Auto	~62px	~81px	~97px
사이 너비	30px (컬럼의 양쪽에 15px 씩)
중첩	예
오프셋	예
컬럼 순서정하기	예

그리드 옵션 샘플 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

		<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다 -->
		<div class="row">
		  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>

		<!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다 -->
		<div class="row">
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>

		<!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다 -->
		<div class="row">
		  <div class="col-xs-6">.col-xs-6</div>
		  <div class="col-xs-6">.col-xs-6</div>
		</div>

  </body>
</html>

예제: 열 감싸기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

		<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다 -->
			<div class="row">
			  <div class="col-xs-9">.col-xs-9</div>
			  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
			  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
			</div>

  </body>
</html>

반응형 컬럼 초기화 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <div class="row show-grid">
      <div class="col-xs-6 col-sm-3">
        .col-xs-6 .col-sm-3
        <br>
        Resize your viewport or check it out on your phone for an example.
      </div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

      <!-- 필요한 뷰포트에만 clearfix 를 추가하세요 -->
      <div class="clearfix visible-xs-block"></div>

      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
  </div>

  </body>
</html>

컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있다. 그걸 고치기 위해서는, .clearfix 와 우리의 responsive utility classes 의 조합을 사용하면 됩니다.

responsive utility classes

	매우 작은 기기모바일폰 (<768px)	작은 기기태블릿 (≥768px)	중간 기기데스크탑 (≥992px)	큰 기기데스크탑 (≥1200px)
`.visible-xs-*`	보임	숨겨짐	숨겨짐	숨겨짐
`.visible-sm-*`	숨겨짐	보임	숨겨짐	숨겨짐
`.visible-md-*`	숨겨짐	숨겨짐	보임	숨겨짐
`.visible-lg-*`	숨겨짐	숨겨짐	숨겨짐	보임
`.hidden-xs`	숨겨짐	보임	보임	보임
`.hidden-sm`	보임	숨겨짐	보임	보임
`.hidden-md`	보임	보임	숨겨짐	보임
`.hidden-lg`	보임	보임	보임	숨겨짐

사용 기기에 따라 보임과 숨겨짐을 구분하여 사용할수 있습니다.

컬럼 오프셋하기 예제

.col-md-offset-* 을 이용하여 오프셋을 줄수가 있다.

.col-md-offset-4 는 .col-md-4 을 4컬럼만큼 이동시킵니다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

		<div class="row">
		  <div class="col-md-4">.col-md-4</div>
		  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
		</div>
		<div class="row">
		  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
		  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
		</div>
		<div class="row">
		  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
		</div>

  </body>
</html>

컬럼 중첩하기 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

		<div class="row">
		  <div class="col-sm-9">
		    Level 1: .col-sm-9
		    <div class="row">
		      <div class="col-xs-8 col-sm-6">
		        Level 2: .col-xs-8 .col-sm-6
		      </div>
		      <div class="col-xs-4 col-sm-6">
		        Level 2: .col-xs-4 .col-sm-6
		      </div>
		    </div>
		  </div>
		</div>

  </body>
</html>

중첩이 될때는 상위 row 를 12열로 봅니다.

컬럼 순서정하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>
 
    <!-- 부트스트랩 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			h4 {
					  margin-top: 25px;
			}
			.row {
					  margin-bottom: 20px;
			}
			.row .row {
					  margin-top: 10px;
					  margin-bottom: 0;
			}
			[class*="col-"] {
					  padding-top: 15px;
					  padding-bottom: 15px;
					  background-color: #eee;
					  background-color: rgba(86,61,124,.15);
					  border: 1px solid #ddd;
					  border: 1px solid rgba(86,61,124,.2);
			}

		hr {
				margin-top: 40px;
			  margin-bottom: 40px;
		}
 		</style>
    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

		<div class="row">
		  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
		  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
		</div>

  </body>
</html>

push 와 pull 의 css 설정을 보면

@media (min-width: 992px) {

/* 생략 */

.col-md-pull-12 {

right: 100%;

}

.col-md-pull-11 {

right: 91.66666667%;

}

.col-md-pull-10 {

right: 83.33333333%;

}

/* 생략 */

.col-md-push-12 {

left: 100%;

}

.col-md-push-11 {

left: 91.66666667%;

}

.col-md-push-10 {

left: 83.33333333%;

}

/* 생략 */

md 는 992px 이상에서 작동하여 push 왼쪽으로 부터 pull은 오른쪽으로 부터 떨어져서 나오는것을 알수 있다 .

992px 큰화면의 경우 해당 스타일이 적용 되어

브라우져를 축소하여 작게 할때에는

스타일이 적용이 안되서

이렇게 나옵니다.

'Web > bootstrap ' 카테고리의 다른 글

bootstrap [CSS]폼 (0)	2017.09.08
bootstrap [CSS] 정렬 클래스 변형 클래스 테이블 (0)	2017.09.07
bootstrap 기본 코드 작성하기 (0)	2017.09.02
bootstrap 이란 ? (0)	2017.09.02

공유하기 링크

페이스북
카카오스토리
트위터

'Web /bootstrap ' Related Articles

Comments

알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

bootstrap [CSS] 그리드 시스템 본문

bootstrap [CSS] 그리드 시스템

그리드 옵션

'Web > bootstrap ' 카테고리의 다른 글

티스토리툴바