UFO ET IT

그리드 시스템에서 밀기와 오프셋의 차이점은 무엇입니까?

ufoet 2021. 1. 7. 08:22
반응형

그리드 시스템에서 밀기와 오프셋의 차이점은 무엇입니까?


부트 스트랩 그리드에서 푸시와 오프셋의 차이점을 이해하려고합니다. 예를 들어 아래 두 행의 유일한 차이점은 각각의 세 번째 열입니다. 하나는 밀기를 사용하고 다른 하나는 오프셋을 사용합니다. 그러나 둘 다 정확히 동일하게 렌더링됩니다.

<div class="row">
    <div class="col-md-2">
        <h2>Column 1</h2>
        <p>
            This is text for column 1
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2">
        <h2>Column 2</h2>
        <p>This is text for column 2</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2 col-md-push-6">
        <h2>Column 3</h2>
        <p>This is text for column 3</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

<div class="row">
    <div class="col-md-2">
        <h2>Column 1</h2>
        <p>
            This is text for column 1
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2">
        <h2>Column 2</h2>
        <p>This is text for column 2</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2 col-md-offset-6">
        <h2>Column 3</h2>
        <p>This is text for column 3</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

오프셋은을 사용 margin-left하고 푸시는 left다음을 사용하기 때문에 :

  • 오프셋은 인접한 열을 강제로 이동합니다.
  • 밀기 (및 당기기)는 다른 열과 겹칩니다.

다음은 시각적 인 예입니다. http://www.bootply.com/126557

귀하의 예에는 '충돌'열이 없습니다. 밀기 및 오프셋은 인접한 열에 영향을주지 않으므로 동일하게 나타납니다.


.col-md-offset-*: *수업 별로 왼쪽 여백이 증가합니다.

.col-md-push-*/.col-md-pull-*: will change the order the grid columns appear by * classes. Pull will send the column to the left, while push send it to the right.


A offset in bootstrap will offset the left side of the column thus moving it over or "offsetting" something to the right. With the "offset" style you can only offset items to the right. For pushes and pulls you can pull something to the "left or right" or you can push something opposite of pull. Pushing or pulling items is primary used for column ordering.

ReferenceURL : https://stackoverflow.com/questions/22792778/what-is-the-difference-between-push-and-offset-under-the-grid-system

반응형