Bootstrap 3 .col-xs-offset- *가 작동하지 않습니까?

지금까지 부트 스트랩 3 그리드 시스템을 사용하고 있으며 모든 것이 잘 작동하고 있으며 col-xs-offset-1을 사용하려고 시도하고 .col-sm-offset-1이 작동하지만 작동하지 않습니다. 내가 여기서 무엇을 놓치고 있습니까?

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

http://jsfiddle.net/petran/zMcs5/2/

편집 : 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도 있지만 많은 경우 중복됩니다.

부트 스트랩 3 xs 오프셋 심

  /*

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

https://gist.github.com/dylanvalade/7362739

col-xs-offset-*미디어 쿼리에서 언급 되었기 때문에 작동하지 않습니다 . 당신이 그것을 사용하려는 경우, 당신은 모두를 언급해야 오프셋 (예 : class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")

그러나 이것은 옳지 않습니다. 그들은 col-xs-offset-*미디어 쿼리에서 언급해야 합니다.

jsfiddle 링크에서 사용되는 부트 스트랩 CSS에는 col-xs-offset- *에 대한 CSS가 없기 때문에 CSS가 적용되지 않았습니다. 최신 부트 스트랩 CSS를 참조하십시오.

Boostrap 4.x부터 col-xs-6 이 이제 col-6 인 것처럼

offset-xs-6 은 이제 offset-6 입니다.

이미 시도했지만 확실히 작동합니다.

문제는 nameclass 대신 .name 클래스를 넣는 것입니다.

col-md-offset-4 대신 offset-md-4를 사용하면 오프셋을 할 때 더 이상 col을 사용할 필요가 없습니다. 귀하의 경우 offset-xs-1을 사용하면 작동합니다. 다음과 같이 bootstrap.css 폴더를 html로 호출했는지 확인하십시오.

, documentation.We의 해달라고 요구 접두사 col-, 그냥 몇 가지 변화 //이 부트 스트랩 4 일이 있었다 오프셋 LG-3 예

<div class="row">
   <div class="offset-lg-3 col-lg-6"> Some content...
   </div>
</div>

// 여기 문서 : http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

최신 부트 스트랩 v3.3.7에 따라 xs 오프셋이 허용됩니다. 여기에서 부트 스트랩 오프셋 문서를 참조하십시오 . 그래서 당신은 사용할 수 있습니다

<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>

누군가가이 페이지에서 걸림돌이되기 전에했던 것과 같은 오류를 범하는 경우, 즉, CSS재설정 규칙 ( 수백만 개의 웹 사이트에서 사용 된 Eric Meyer가 사용 하는 매우 인기있는 재설정 ) 을 추가합니다. 부트 스트랩 포함 합니다.

또한 부트 스트랩이 실제로 normalize.css v3.0.2 재설정을 구현하는 경우 부트 스트랩에서는 이러한 재설정이 필요하지 않다는 점을 지적해야합니다 .

클래스 앞의 점을 제거하면 다음과 같이 표시됩니다.

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