Twitter Bootstrap 3을 사용하여 열 중심

1146

Twitter Bootstrap 3 의 컨테이너 (12 열) 내에서 한 열 크기의 div를 가운데에 배치하려면 어떻게합니까?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>
스 니펫 확장

컨테이너 내에서 div클래스 .centered를 중심으로 하는을 원합니다 . 여러 개가있는 경우 행을 사용할 수 div있지만 지금 div은 컨테이너 내에서 하나의 열 크기 (12 열)를 원합니다 .

또한 의도가 div반 으로 상쇄하지 않기 때문에 위의 접근 방식이 충분하다는 것을 확신하지 못합니다 . 여유 공간 div과 div축소 의 내용 에 비례 하여 여유 공간이 필요하지 않습니다 . div 외부의 공간을 균등하게 분배하기 위해 비우고 싶습니다 (컨테이너 너비가 하나의 열과 같아 질 때까지 축소).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
소스

답변:

1963

<div>부트 스트랩 3에서 열의 중심을 맞추는 방법에는 두 가지가 있습니다 .

접근법 1 (오프셋) :

첫 번째 접근 방식은 부트 스트랩 자체의 오프셋 클래스를 사용하므로 마크 업을 변경하거나 추가 CSS를 요구하지 않습니다. 핵심은 오프셋을 나머지 행 크기의 절반과 동일하게 설정하는 것 입니다. 예를 들어, 크기가 2 인 열은 오프셋 5를 추가하여 중심이됩니다 (12-2)/2.

마크 업에서 이것은 다음과 같습니다.

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

이제이 방법에는 명백한 단점이 있습니다. 그것은 단지도 열 크기에 작동하는 , 그래서 단지 .col-X-2, .col-X-4, col-X-6, col-X-8, 및 col-X-10지원됩니다.

접근법 2 (구 margin:auto)

입증 된 기술 을 사용하여 열 크기 를 중앙에 맞출 수 있습니다margin: 0 auto; . Bootstrap의 그리드 시스템에 의해 추가 된 플로팅을 처리하면됩니다. 다음과 같은 사용자 정의 CSS 클래스를 정의하는 것이 좋습니다.

.col-centered{
    float: none;
    margin: 0 auto;
}

이제 모든 화면 크기에서 모든 열 크기에 추가 할 수 있으며 Bootstrap의 반응 형 레이아웃과 완벽하게 작동합니다.

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

참고 : 두 가지 기술을 모두 사용하면 .row요소를 건너 뛸 수 있고 열을 가운데로 배치 .container할 수는 있지만 컨테이너 클래스의 패딩으로 인해 실제 열 크기에는 약간의 차이가 있습니다.

최신 정보:

v3.0.1 부트 스트랩에는를 center-block사용 margin: 0 auto하지만 이름이없는 내장 클래스 float:none가 있으므로 그리드 시스템에서 작동하도록 CSS에 추가 할 수 있습니다.

— 코알라 _ 데브
소스
1
센터 블록 규칙에는 float : none이 없다고 생각합니다 .float를 지우는 요소에 추가 할 수있는 clearfix 독립 규칙이 있기 때문입니다.
— Diego Fernando Murillo Valenci
7
@DiegoFernandoMurilloValenci는 .clearfix이 경우에없는 일이 (센터 사용을 필요로하는 요소에 플로트 속성을 제거하지 않습니다 때문에 margin: 0 auto, 그냥 용기 내부의 부유 요소를 포장한다)
— koala_dev
4
, 열에서이를 사용할 수 없음으로 인해 수 없습니다float:none;
— airtonix
2
한 줄에 둘 이상의 열을 가운데에 배치하려면이 답변을 참조하십시오 stackoverflow.com/questions/28683329/…
— Conor Svensson
3
Bootstrap4에서 오프셋 구문이 최신 버전으로 변경되었습니다. 이 응답을 예로 사용하면 col-md-offset-5 클래스는 이제 offset-md-5 여야합니다.
— lgants September
296

의 선호하는 방법 열을 중심으로는 "오프셋"을 사용하는 것입니다 (예 : col-md-offset-3)

부트 스트랩 3.x 중심 예제

위해 요소를 중심으로 하는이 center-block 헬퍼 클래스 .

텍스트 (및 인라인 요소) text-center를 중앙에 배치 하는 데 사용할 수도 있습니다 .

데모 : http://bootply.com/91632

편집 -주석에서 언급했듯이center-block열 내용 및display:block요소에서는 작동하지만col-*Bootstrap은을 사용하기 때문에열 자체 (div)에서는 작동하지 않습니다float.

2018 업데이트

이제 Bootstrap 4 에서 중심 설정 방법이 변경되었습니다.

  • text-center여전히 display:inline요소에 사용됩니다
  • mx-autocenter-block중심 display:block요소로 대체
  • offset-* 또는 mx-auto 그리드 열을 중앙에 배치하는 데 사용할 수 있습니다

mx-auto(자동 X 축 마진) 중앙 것 display:block또는 display:flex요소가 한정된 폭 ( %, vw, px, 등). Flexbox는 그리드 열에 기본적 으로 사용 되므로 다양한 flexbox 센터링 방법도 있습니다.

데모 부트 스트랩 4 수평 센터링

BS4의 수직 센터링에 대해서는 https://stackoverflow.com/a/41464397/171456을 참조 하십시오.

— 짐
소스
31
불행히도이 도우미 클래스는 float 속성을 처리하지 않기 때문에 열 시스템에서 작동하지 않습니다. 예를 들어이 데모 를 보십시오 .
— koala_dev
13
중앙 블록 만 필요 {float : none; }, 작동합니다. bootply.com/122268
— Matias Vad
5
OP에 대해서는 확실하지 않지만 text-center다른 답변은 제공하지 않는 세부 정보를 찾고 있습니다. 이 사람은 내 투표를 얻습니다.
— domoarigato
1
, 열에서이를 사용할 수 없음으로 인해 수 없습니다float:none;
— airtonix
98

이제 Bootstrap 3.1.1이 작업하고 있으며이 .center-block도우미 클래스는 열 시스템에서 작동합니다.

부트 스트랩 3 헬퍼 클래스 센터 .

이 jsfiddle 데모를 확인하십시오 .

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

헬퍼 클래스 센터

col-center-block도우미 클래스를 사용하여 행 열 중심 .

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— 송신기
소스
float:nonediv center-block에 style="width : ?px"스타일을 적용하여 추가하지 않고도이 작업 을 수행했습니다. 예를 들어 이미지 너비입니다. 3.2.2와 호환
— Piotr Kula
여백 : 0 자동; -마진-왼쪽 + 마진-오른쪽
— mmike
57

사용자 정의 CSS 파일에 다음을 추가하기 만하면됩니다. 부트 스트랩 CSS 파일을 직접 편집하는 것은 권장되지 않으며 CDN 사용 기능을 취소합니다 .

.center-block {
    float: none !important
}

왜?

부트 스트랩 CSS (버전 3.7 이하)는 margin : 0 auto; 그러나 크기 컨테이너의 float 속성으로 재정의됩니다.

PS :

이 클래스를 추가 한 후에는 올바른 순서로 클래스를 설정하는 것을 잊지 마십시오.

<div class="col-md-6 center-block">Example</div>
— Sagive SEO
소스
1
나는 Bootstrap을 사용 3.3.7하고 있으며 이것이 나를 위해 유일한 방법입니다!
— illagrenan
1
이 작동합니다. 하지만 생각하지 않는 것은 !important필요하다
— 지안 프랑코 P.
1
G P. 당신의 권리, 그러나 ...로드 순서에 달려 있으며 나는 완벽한 방법을 제공하고 싶었습니다.
— Sagive SEO
39

부트 스트랩 3 에는 이제이 클래스가 내장되어 있습니다..center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

여전히 2.X를 사용하고 있다면 CSS에 추가하십시오.

— 슈 말지
소스
원하는 효과를 가장 쉽게 얻을 수 있습니다. 더 모듈 방식으로 접근하려는 경우 .centered 클래스에 너비를 추가하거나 두 번째 클래스를 추가하십시오.
— Matt Lambert
2
float 추가 : none; to .centered를 사용하면 클래스를 컨테이너로 이동할 수 있습니다. 코드를 깨끗하게 유지
— Adam Patterson
7
, 열에서이를 사용할 수 없음으로 인해 수 없습니다float:none;
— airtonix
37

가운데 열에 대한 나의 접근 방식 display: inline-block은 열과 text-align: center컨테이너 부모에 사용하는 것입니다.

CSS 클래스 'centered'를에 추가하면 row됩니다.

HTML :

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS :

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle : http://jsfiddle.net/steyffi/ug4fzcjd/

— 스테피
소스
2
이것은 100 % 일한 유일한 대답입니다. 다른 사람들은 일했지만 부트 스트랩이 모바일보기로 전환되었을 때 (항목이 왼쪽으로 이동했을 때) 작동하지 않았습니다.
— Levi Fuller
이것은 나뿐만 아니라 .center-block 만 하나의 열에서만 작동하며 열 수에 관계없이 모든 열을 중앙에 배치해야합니다.
— cjohansson
나에게도 효과가있는 솔루션. 다른 브라우저는 브라우저가 전체 화면이 아닌 창일 때만 작동했습니다.
— kiwicomb123
26

부트 스트랩 버전 3에는 .text-center 클래스가 있습니다.

이 클래스를 추가하십시오.

text-center

이 스타일을 간단히로드합니다 :

.text-center {
    text-align: center;
}

예:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>
— 러스티 잉글 스
소스
이 수업이 추가 될 곳을 명확히 하시겠습니까?
— aksu
@aksu 님, .css를 추가 할 필요가 없습니다. 제공된 예를보십시오.
— JoshYates1980
15

작동합니다. 아마도 hackish 방식이지만 잘 작동합니다. 반응 형 (Y)으로 테스트되었습니다.

.centered {
    background-color: teal;
    text-align: center;
}

데스크탑

반응 형

— 알리 가자 니
소스
요소에 인라인 표시가 있기 때문에 작동합니다. 는 img블록으로 설정 될 수있다.
— ProfileTwist
아마도 격리 된 테스트 사례 일 것입니다. 나는 .centered img { display: inline; }당신의 답변에 추가 하고 대신에 투표권을 가질 가치가 있습니다.
— ProfileTwist 2016 년
문제 없어요. OP가 자신의 답변을 찾을 것이라고 확신합니다 :)
— Ali Gajani
부트 스트랩 3에서 .text-center 클래스는 위에서 배운 것처럼 기본적으로 동일한 작업을 수행합니다.
— domoarigato
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— 왈리
소스
6

열을 중앙에 맞추려면 아래 코드를 사용해야합니다. cols는 margin auto 외에 floater 요소입니다. 플로팅을하지 않도록 설정합니다.

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

위의 col-lg-1을 중심 클래스로 중앙에 맞추기 위해 다음과 같이 작성합니다.

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

div 안에 콘텐츠를 중앙에 배치하려면 text-align:center,

.centered {
    text-align: center;
}

모바일이 아닌 데스크톱과 더 큰 화면에만 가운데를 배치하려면 다음 미디어 쿼리를 사용하십시오.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

모바일 버전에서만 div를 가운데 맞추려면 아래 코드를 사용하십시오.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
— 아머 샤 자드
소스
6

컨텐츠를 표시하는 하나의 열을 col-xs-12 (mobile-first ;-)로 설정하고 중앙 컨텐츠의 너비를 제어하도록 컨테이너 만 구성하십시오.

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
스 니펫 확장

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
스 니펫 확장

데모는 http://codepen.io/Kebten/pen/gpRNMe :-)를 참조하십시오 .

— 키어런 라이언
소스
6

오프셋의 또 다른 접근법은 예를 들어 다음과 같이 두 개의 빈 행을 갖는 것입니다.

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— 르로이
소스
1
이 쓸모 div의, COL-MD는-오프셋, *는 더
— ymakux
1
동의한다. 실제로 잘 작동하고 테스트 되었기 때문에이 방법을 사용했습니다.
— LeRoy
6

당신이 사용할 수있는 text-center행과 반드시 내부 div를 가질 수 있습니다 display:inline-block(하지와 함께 float).

같이:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

그리고 CSS :

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

바이올린 : http://jsfiddle.net/DTcHh/3177/

— 알리레자 파타 히
소스
6

부트 스트랩 4를 사용하면 여기에justify-content-md-center 언급 된 것처럼 간단하게 시도 할 수 있습니다

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

여기에 이미지 설명을 입력하십시오

— 호세인 나리 마니 라드
소스
1
@AdamErickson이 질문은 특별히 부트 스트랩 3 솔루션을 요구했습니다. 이 답변은 아마도 BS4로가는
— 길일 것이므로
5

이것은 아마도 가장 좋은 대답은 아니지만 이것에 대한 창의적인 해결책이 하나 더 있습니다. koala_dev가 지적한 것처럼 열 오프셋은 짝수 열 크기에서만 작동합니다. 그러나 행을 중첩하면 중앙에 고르지 않은 열이 생길 수 있습니다.

그리드 12 안에 1 열을 가운데에 배치하려는 원래 질문을 고수합니다.

  1. 5를 오프셋하여 2의 열 중심
  2. 중첩 행을 만들면 2 열 안에 12 열이 새로 생깁니다.
  3. 1의 열을 가운데에 놓고 1은 2의 "반쪽"(1 단계에서 중앙에 놓은 것)이므로 중첩 된 행에 6의 열을 가운데에 배치해야합니다.이 열은 3을 오프셋하여 쉽게 수행 할 수 있습니다.

예를 들면 다음과 같습니다.

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

참조 이 바이올린 당신이 결과를 볼 너무 위해 출력 윈도우의 크기를 증가해야한다는, 제발 메모를, 그렇지 않으면 열 바꿈됩니다.

— Reinder
소스
5

이것은 내 코드는 아니지만 완벽하게 작동합니다 (Bootstrap 3에서 테스트 됨).

데모:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
스 니펫 확장

— 이진 웹
소스
4

테이블 레이아웃 메커니즘을 사용하여이를 달성 할 수 있습니다.

메커니즘은 다음과 같습니다.

  1. 모든 열을 하나의 div로 묶습니다.
  2. 해당 div를 고정 레이아웃이있는 테이블로 만듭니다.
  3. 각 열을 표 셀로 만듭니다.
  4. 세로 정렬 속성을 사용하여 컨텐츠 위치를 제어하십시오.

샘플 데모는 여기

여기에 이미지 설명을 입력하십시오

— 모한 디어
소스
4

.row 또는 .col 안에 다음 스 니펫을 추가하십시오. 이것은 Bootstrap 4 * 용입니다.

d-flex justify-content-center
— 토마스 치와
소스
3

koala_dev가 그의 접근법 1에서 사용 된 것처럼, 나는 사용이 제한된 센터 블록이나 마진 대신 오프셋 방법을 선호하지만 그가 언급했듯이 :

이제이 방법에는 명백한 단점이 있습니다. 단지 열 크기에서만 작동하므로 .col-X-2, .col-X-4, col-X-6, col-X-8 및 col-X- 10이 지원됩니다.

홀수 열에 대해 다음 방법을 사용하여이 문제를 해결할 수 있습니다.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— 아비 나브 싱
소스
3

매우 유연한 솔루션 flexbox를 부트 스트랩에 사용할 수 있습니다.

justify-content: center;

열을 중앙에 배치 할 수 있습니다.

플렉스를 확인하십시오 .

— 거친
소스
2

.col-내에서 하나만 센터링 할 필요가 없으므로 대상 열의 .row줄 바꿈 .row에 다음 클래스를 설정했습니다 .

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

예

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— 월터 로마
소스
2

그리드를 채울 정확한 숫자가 없을 때 화면의 열 요소를 가운데에 배치하려는 사람들을 위해 클래스 이름을 반환하는 작은 JavaScript를 작성했습니다.

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

5 개의 요소가 있고 md화면 에 행당 3 개를 가지려면 다음을 수행하십시오.

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

두 번째 주장은 12로 나눌 수 있어야합니다.

— jsgoupil
소스
2

부트 스트랩 행에서 둘 이상의 열을 가운데에 맞추고 열 수가 홀수 인 경우 css해당 행의 모든 열에이 클래스를 추가하십시오 .

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

따라서 HTML에는 다음과 같은 것이 있습니다.

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— 루토 콜린스
소스
2

이 시도

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

당신은 다른 사용할 수 있습니다 col아니라 등 col-md-2등,

— Ch 우마르 자밀
소스
2

클래스를 사용하는 것이 좋습니다 text-center.

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— 다디 치 수 라프
소스
2

이 코드를 사용해보십시오.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

여기에서는 col-lg-1을 사용했으며 큰 장치에서 div를 올바르게 가운데 맞추려면 오프셋이 10이어야합니다. 중대형 장치를 중심으로 배치 해야하는 경우 lg를 md 등으로 변경하십시오.

— 방가시
소스
2

부트 스트랩 4 솔루션 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— 얀 브루스
소스
1

이것을 행에두면 내부의 모든 열이 중앙에 위치합니다.

.row-centered {
    display: flex;
    justify-content: space-between;
}
— 에 란 샤비
소스
요소를 응답하지 않게 만들었습니다.
— gfivehost
1

보다 정확한 부트 스트랩의 그리드 시스템은 12 개의 열을 포함하고 모든 컨텐츠를 중앙 집중화하기 위해 예를 들어 컨텐츠는 하나의 열을 차지합니다. 부트 스트랩 그리드의 두 열을 차지하고 채워진 두 열의 절반에 내용을 배치해야합니다.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5'는 그리드 시스템에 컨텐츠 배치를 시작할 위치를 알려줍니다.

'col-xs-2'는 그리드 시스템에 얼마나 많은 남은 열이 내용을 차지해야하는지 알려줍니다.

'중심'은 컨텐츠를 중심으로하는 정의 된 클래스입니다.

다음은이 예제가 Bootstrap의 그리드 시스템에서 어떻게 보이는지 보여줍니다.

열 :

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... 오프셋 ........ 데이터. ....... 미사용 ........

— 기술
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.