programing

Twitter 부트스트랩을 사용하여 열 가운데 맞춤

i4 2023. 5. 31. 15:18

Twitter 부트스트랩을 사용하여 열 가운데 맞춤

Twitter Bootstrap 3의 컨테이너(12열) 내에서 하나의 열 크기의 div를 중심화하려면 어떻게 해야 합니까?

.centered {
  background-color: red;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

갖고 싶어요div수업이 있는..centered용기 내에서 중심이 잡히도록 합니다.이 있을 경우 행을 사용할 수 .div, 하만지금그냥은지,그▁a냥▁just▁want▁s▁s금.div하나의 열 크기를 용기 내 중앙에 배치합니다(12개의 열).

저는 또한 위의 접근법이 충분한지 확신할 수 없습니다. 왜냐하면 의도가 그것을 상쇄하지 않기 때문입니다.div반으로외부에 여유 공간이 필요하지 않습니다.div 그고그내들의 .div비례하여 축소하다div 외부 공간을 비워 균등하게 분포되도록 합니다(용기 너비가 하나의 열과 같을 때까지 축소).

에는 두 .<div> 3 부트스트랩 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 (구 어로치구 2 (프)`margin:auto`)

검증된 열 크기를 중앙에 배치할 수 있습니다.margin: 0 auto;부트스트랩의시스템에 .당신은 부트스트랩의 그리드 시스템에 의해 추가되는 부동을 처리하기만 하면 됩니다.다음과 같은 사용자 지정 CSS 클래스를 정의하는 것이 좋습니다.

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

이제 화면 크기에 상관없이 모든 열 크기에 추가할 수 있으며 부트스트랩의 응답형 레이아웃과 원활하게 작동합니다.

<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에 추가해서 그리드 시스템과 함께 작동하게 할 수 있습니다.

부트스트랩 5(2023 업데이트)

부트스트랩 5는 플렉스박스 기반이기 때문에 센터링은 부트스트랩 4와 유사합니다.자동 여백을 사용하여 열을 가운데로 밀어 넣을 수 있습니다...

<div class="row">
     <div class="col-3 mx-auto text-center border">
         <p>
            I'm centered (margin: auto)
         </p>
     </div>
</div>

-또는-

flexbox 유틸즉사용스래클티리즉(▁(,,justify-content-center가운데로...

<div class="row justify-content-center">
        <div class="col-4 text-center border">
            <p>
                I'm centered
            </p>
        </div>
</div>

https://codeply.com/p/9mpTQJ3fIn

부트스트랩 4(2020년 업데이트)

플렉스박스 기반 부트스트랩 4에서는 센터링 방법이 변경되었습니다.

text-center도 에여사용다니됩히에 됩니다.display:inline
mx-auto를 대체합니다.center-blockdisplay:block
offset-* 또는 mx-auto그리드 열을 중앙에 배치하는 데 사용할 수 있습니다.

mx-auto축 여백은 중심(동축여이백)이 됩니다.display:block또는display:flex정의된 폭을 갖는 요소, (%,vw,px등).Flexbox는 그리드 열에서 기본적으로 사용되므로 다양한 Flexbox 중심 맞추기 방법도 있습니다.

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

BS4의 수직 중심은 다음을 참조하십시오. https://stackoverflow.com/a/41464397/171456

부트스트랩 3(원답)

열 중심을 맞추는 일반적인 방법은 "오프셋"(즉, 다음)을 사용하는 것입니다.col-md-offset-3)

부트스트랩 3.x 센터링 예제

센터링 요소에는 다음과 같은 것이 있습니다.center-block 도우미 클래스

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

대응 데모: https://codeply.com/p/sRH9hSKup1

EDIT - 댓글에 언급된 것처럼center-block 및 컬럼내대작및업한에에 display:block요소, 그러나 열 자체에서는 작동하지 않습니다(col-*은 div를 사용하기 때문입니다.float.

3은 이제부 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; */
}

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

.center-block {
    float: none !important
}

왜요?

부트스트랩 CSS(버전 3.7 이하)는 마진 0 auto;를 사용하지만 크기 컨테이너의 float 속성에 의해 재정의됩니다.

PS:

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

<div class="col-md-6 center-block">Example</div>

부트스트랩 3에는 이제 이를 위한 기본 제공 클래스가 있습니다..center-block

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

만약 당신이 여전히 2.X를 사용하고 있다면, 이것을 당신의 CSS에 추가하세요.

저의 은 중앙열대내접방다같다습니음과식은근한에다같을 사용하는 입니다.display: inline-block 및 열에 text-align: center컨테이너 상위 항목입니다.

'centered를 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;
}

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

부트스트랩 버전 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>

및 부스트v3 및v4 하면다추음가것을는다있이니습수를 추가하는 만으로 이 작업을 할 수 ..justify-content-center에▁.row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/ #dll-context

효과가 있습니다.아마도 진부한 방법이겠지만, 그것은 잘 작동합니다.반응성(Y)이 검정되었습니다.

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

데스크톱

반응형

부트스트랩 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>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

콜의 중심을 잡으려면 아래 코드를 사용해야 합니다.콜은 여백 자동 이외의 부유 요소입니다.또한 아무것도 뜨지 않도록 설정할 것입니다.

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

위의 col-lg-1을 centraled 클래스로 중심 맞추기 위해, 우리는 다음과 같이 쓸 것입니다.

.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;
    }
}

콘텐츠를 표시하는 열을 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 을 참조하십시오. :-)

사용할 수 있습니다.text-center행을 위해 그리고 내부 디브가 가지고 있는지 확인할 수 있습니다.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/

간격띄우기의 또 다른 방법은 다음과 같이 두 개의 빈 열을 갖는 것입니다.

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

이것은 아마도 최선의 답은 아닐 것입니다. 하지만 이것에 대한 창의적인 해결책이 하나 더 있습니다.cala_dev가 지적한 것처럼 열 오프셋은 열 크기가 짝수인 경우에만 작동합니다.그러나 행을 중첩함으로써 불균일한 열 중심화도 달성할 수 있습니다.

12의 격자 안에 1의 열을 가운데에 두고자 하는 원래 질문을 계속합니다.

간격띄우기 5를 사용하여 2의 열 중심을 맞춥니다.
두 개의 열 안에 새 열 12개의 열을 얻을 수 있도록 내포된 행을 만듭니다.
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>

이 피들을 참조하십시오. 결과를 보려면 출력 창의 크기를 늘려야 합니다. 그렇지 않으면 열이 감깁니다.

이것은 제 코드는 아니지만 완벽하게 작동합니다(부트스트랩 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>

.row 또는 .col 내부에 다음 스니펫을 추가합니다.이것은 부트스트랩 4*용입니다.

d-flex justify-content-center

표 레이아웃 메커니즘을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

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

모든 열을 하나의 디브로 묶습니다.
그 div를 고정된 레이아웃의 테이블로 만듭니다.
각 열을 표 셀로 만듭니다.
내용 위치를 제어하려면 수직 정렬 속성을 사용합니다.

샘플 데모는 여기에 있습니다.

<div class="container">
    <div class="row row-centered">
        <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>

CSS

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    text-align: center;
    background-color: #ccc;
    border: 1px solid #ddd;
}

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

이 방법에는 분명한 단점이 있습니다. 이 방법은 짝수 열 크기에만 적용되므로 .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>

사용하다mx-auto부트스트랩 4를 사용하는 당신의 div 클래스에서.

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>

부트스트랩 4 솔루션:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

는 단 한의 중심만 잡을 필요가 없기 때문입니다..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>

그리드를 채울 정확한 숫자가 없을 때 열 요소를 화면 중앙에 배치하려는 사용자를 위해 클래스 이름을 반환하기 위해 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));
}

인데 한 3개씩 md화면에서 다음 작업을 수행합니다.

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로 나눌 수 있어야 합니다.

행에 둘하려면 - 콜홀수인 경우 이 부스트랩둘이열중배을앙치다고를 .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>

사용해 보세요.

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

다른 것을 사용할 수 있습니다.col와 col-md-2 타기.

합니다.text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

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

justify-content: center;

열을 가운데에 둘 수 있습니다.

플렉스를 확인해 보세요.

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

<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 등으로 변경하면 됩니다.

언급URL : https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap

'programing' 카테고리의 다른 글

Xcode의 후행 공백 잘라내기 (0)	2023.06.05
lapply와 do.call의 차이점은 무엇입니까? (0)	2023.06.05
Gemfile을 찾을 수 없습니다. (0)	2023.05.31
C#은 첫 번째 패스 예외 필터링을 지원하지 않는 이유는 무엇입니까? (0)	2023.05.31
텍스트 편집을 위한 첫 글자 대문자화 (0)	2023.05.31

현재글Twitter 부트스트랩을 사용하여 열 가운데 맞춤

각종 프로그래밍 정보를 다루는 블로그입니다.

jquery, angularJS, RUBY, Android, sql-server, Excel, python, mariadb, spring-boot, mongodb, Wordpress, ajax, WPF, c, Oracle, json, ASP.NET, css, git, reactjs,

Today :
Yesterday :

i4

Twitter 부트스트랩을 사용하여 열 가운데 맞춤

Twitter 부트스트랩을 사용하여 열 가운데 맞춤

접근 1(오프셋):

2 (구 어로치구 2 (프)`margin:auto`)

HTML:

CSS:

표 레이아웃 메커니즘을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

샘플 데모는 여기에 있습니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/10 »
일	월	화	수	목	금	토
		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	31

Twitter 부트스트랩을 사용하여 열 가운데 맞춤

Twitter 부트스트랩을 사용하여 열 가운데 맞춤

접근 1(오프셋):

2 (구 어로치구 2 (프)margin:auto)

HTML:

CSS:

표 레이아웃 메커니즘을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

샘플 데모는 여기에 있습니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

2 (구 어로치구 2 (프)`margin:auto`)