지금까지 부트 스트랩 3 그리드 시스템을 사용하고 있으며 모든 것이 잘 작동하고 있으며 col-xs-offset-1을 사용하려고 시도하고 .col-sm-offset-1이 작동하지만 작동하지 않습니다. 내가 여기서 무엇을 놓치고 있습니까?
<div class="col-xs-2 col-xs-offset-1">col</div>
답변
편집 : Bootstrap 3.1 .col-xs-offset-* 이 존재합니다 .bootstrap :: 그리드 옵션을 참조하십시오.
.col-xs-offset-*존재하지 않습니다. 오프셋 및 열 순서는 작고 더 많은 경우에만 적용됩니다. (ONLY .col-sm-offset-*, .col-md-offset-*과 .col-lg-offset-*)
공식 문서 참조 : 부트 스트랩 :: 그리드 옵션
답변
또는 xs-offset에 대해 빈 div를 추가 할 수 있습니다 (여러 곳에서 콘텐츠를 관리해야하는 것을 절약 할 수 있습니다).
<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>
부트 스트랩 개발자는 xs-ofsets 및 push / pull 클래스 추가를 거부하는 것 같습니다. 여기를 참조하십시오. https://github.com/twbs/bootstrap/issues/9689
답변
오프셋이 0 인 더 높은 픽셀을 부정하여 xs 장치에 대해서만 오프셋 세트를 얻을 수 있습니다. 그렇게
class="col-xs-offset-1 col-md-offset-0"
답변
오프셋을 원하지만 매우 작은 너비를 사용할 수없는 경우에 대한 제안 :
.hidden-xs및 .visible-xs을 사용 하여 매우 작은 너비에 대해 하나의 html 블록 버전을 만들고 다른 모든 버전에 대해 하나를 만듭니다 (오프셋을 사용할 수있는 경우).
예:
<div class="hero container">
<div class="row">
<div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
<h2>This is a banner at the top of my site. It shows in everything except XS</h2>
<p>Here are some supporting details about my banner.</p>
</div>
<div class="visible-xs col-xs-12">
<h2 class="pull-right">This is my banner at XS width.</h2>
<p class="pull-right">This is my supporting content at XS width.</p>
</div>
</div>
</div>
답변
동일한 요소에 여백을 수동으로 적용하면 col-md-offset-4가 작동하지 않습니다. 예를 들면
위 코드에서는 오프셋이 적용되지 않습니다. 대신 0 auto의 여백이 적용됩니다.
답변
이것은 정말 실망 스러웠 기 때문에 col-offset-xs-*. 또한 이번 주에 설치된 Bootstrap SASS repo Bower에는 포함되지 않았으므로 col-offset-sm-0shimmed도 있지만 많은 경우 중복됩니다.
답변
/*
Include this after bootstrap.css
Add a class of 'col-xs-offset-*' and
if you want to disable the offset at a larger size add in 'col-*-offset-0'
Examples:
All display sizes (xs,sm,md,lg) have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-3">
xs has an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">
xs and sm have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">
xs, sm and md will have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">
*/
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
margin-left: 0;
}
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
