Main menu

Bootstrap 3 강좌 | .container, .container-fluid

.container, .container-fluid

레이아웃을 만드는 가장 상위 요소에 .container 또는 .container-fluid를 추가합니다.

전체 가로폭을 정하는 클랙스 값입니다.

  • .container
    고정폭 레이아웃을 만들 때 사용합니다.
  • .container-fluid
    좌우로 꽉 찬 레이아웃을 만들 때 사용합니다.

.container의 속성은 다음과 같습니다.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

가로 해상도 767px 이하에서는 100%, 768px 이상에서는 750px, 992px 이상에서는 970px, 1200px 이상에서는 1170px의 가로폭을 가집니다.

.container-fluid의 속성은 다음과 같습니다.

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

가로 해상도에 관계없이 100%의 가로폭을 가집니다.

예제

<!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">
    <title>Bootstrap | Grid System - Container</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      .container {
        background-color: #cccccc;
      }
      .container-fluid {
        background-color: #dddddd;
      }
      h1 {
        margin: 100px 0px;
      }
    </style>
    <!--[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>
    <div class="container">
      <h1>.container</h1>
    </div>
    <div class="container-fluid">
      <h1>.container-fluid</h1>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

이 글을 공유하기

Kakao