그리드 시스템에서 밀기와 오프셋의 차이점은 무엇입니까?
부트 스트랩 그리드에서 푸시와 오프셋의 차이점을 이해하려고합니다. 예를 들어 아래 두 행의 유일한 차이점은 각각의 세 번째 열입니다. 하나는 밀기를 사용하고 다른 하나는 오프셋을 사용합니다. 그러나 둘 다 정확히 동일하게 렌더링됩니다.
<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 »</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 »</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 »</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 »</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 »</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 »</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
'UFO ET IT' 카테고리의 다른 글
세분화 오류의 일반적인 원인에 대한 명확한 목록 (0) | 2021.01.08 |
---|---|
JavaScript ES6 클래스가 비동기 코드베이스와 함께 사용됩니까? (0) | 2021.01.08 |
프로그래밍 방식으로 부트 스트랩 드롭 다운을 여는 방법 (0) | 2021.01.07 |
Bootstrap 3 및 Boostrap 4-input-xs (sm보다 작음) (0) | 2021.01.07 |
멀티 인덱스를 사용한 판다 플로팅 (0) | 2021.01.07 |