Bootstrap 3 .col-xs-offset- * nie działa?

Używam systemu siatki bootstrap 3 do tej pory go uwielbiałem i wszystko działało dobrze, próbuję użyć col-xs-offset-1 i nie działa, chociaż .col-sm-offset-1 działa. Czego tu brakuje?

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

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

Edycja: od wersji Bootstrap 3.1 .col-xs-offset-* istnieje , zobacz opcje bootstrap :: grid

.col-xs-offset-*nie istnieje. Kolejność przesunięć i kolumn dotyczy tylko małych i nie tylko. (TYLKO .col-sm-offset-*, .col-md-offset-*i .col-lg-offset-*)

Zobacz oficjalną dokumentację: opcje bootstrap :: grid

Alternatywnie możesz dodać pusty element div dla przesunięcia xs (oszczędziłoby to konieczności zarządzania zawartością w więcej niż jednym miejscu)

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

Twórcy bootstrapów wydają się odmawiać dodania tych xs- ofsets i klas push / pull, zobacz tutaj: https://github.com/twbs/bootstrap/issues/9689

Możesz uzyskać przesunięcie ustawione tylko dla urządzeń xs, negując wyższe piksele z przesunięciem 0. Tak jak tak

class="col-xs-offset-1 col-md-offset-0"

Sugestia dla sytuacji, gdy chcesz wykonać przesunięcie, ale nie jesteś w stanie przy bardzo małych szerokościach:

Użyj .hidden-xsi, .visible-xsaby utworzyć jedną wersję swojego bloku html dla bardzo małych szerokości i jedną dla wszystkich innych (gdzie nadal możesz użyć przesunięcia)

Przykład:

<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 nie działa, jeśli ręcznie zastosujesz margines do tego samego elementu. Na przykład

W powyższym kodzie przesunięcie nie zostanie zastosowane. Zamiast tego zostanie zastosowany margines 0 auto

To było naprawdę frustrujące, więc napisałem streszczenie, które możesz wykorzystać col-offset-xs-*. Zauważyłem również, że repozytorium Bootstrap SASS Bower zainstalowanego w tym tygodniu nie zawierało, col-offset-sm-0więc jest również podkładane, ale w wielu przypadkach będzie zbędne.

Podkładka offsetowa Bootstrap 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

To nie działa, ponieważ col-xs-offset-*wspomniano o tym w zapytaniu o media. jeśli chcesz z niego skorzystać, musisz wspomnieć o całym przesunięciu (np . class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0":)

Ale to nie w porządku, powinni o col-xs-offset-*tym wspomnieć w zapytaniu o media

Css bootstrap używany w łączu jsfiddle, nie ma css dla col-xs-offset- *, dlatego css nie zostało zastosowane. Zapoznaj się z najnowszym css bootstrap.

Od Boostrap 4.x, tak jak col-xs-6 jest teraz po prostu col-6

offset-xs-6 to teraz po prostu offset-6 .

Już tego próbowałem, na pewno działa.

Problem polega na tym, że zamiast klasy nazw umieszczasz klasę .name

zamiast używać col-md-offset-4 użyj zamiast offset-md-4, nie musisz już używać col, gdy wykonujesz offset. W twoim przypadku użyj offset-xs-1 i to zadziała. upewnij się, że wywołałeś folder bootstrap.css w swoim html w następujący sposób.

// działa w bootstrapie 4, nastąpiły pewne zmiany w dokumentacji, nie potrzebujemy prefiksu col-, wystarczy offset-lg-3 np.

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

// tutaj dokument: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

Zgodnie z najnowszą wersją bootstrap 3.3.7 xs-offseting jest dozwolony. Zobacz dokumentację tutaj bootstrap offseting . Więc możesz użyć

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

Na wypadek, gdyby ktoś popełnił ten sam błąd, co przed potknięciem się na tej stronie, czyli dodanie CSSreguł resetowania (takich jak bardzo popularny reset Erica Meyera używany na milionach witryn) po włączeniu bootstrapu.

Powinienem też zwrócić uwagę, że taki reset nie będzie konieczny z bootstrapem, ponieważ bootstrap faktycznie implementuje reset normalize.css v3.0.2 .

Usuń kropkę przed klasą, aby wyglądała tak:

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