Bootstrap 3 .col-xs-offset- * funktioniert nicht?

Ich benutze Bootstrap 3 Grid System hat es bisher geliebt und alles hat gut funktioniert, ich versuche col-xs-offset-1 zu verwenden und funktioniert nicht, obwohl .col-sm-offset-1 funktioniert. Was vermisse ich hier?

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

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

Edit: wie von Bootstrap 3.1 .col-xs-offset-* vorhanden ist , siehe Bootstrap :: Rasteroptionen

.col-xs-offset-*existiert nicht. Offset- und Spaltenreihenfolge gelten nur für kleine und mehr. (NUR .col-sm-offset-*, .col-md-offset-*und .col-lg-offset-*)

Siehe die offizielle Dokumentation: bootstrap :: grid options

Alternativ können Sie ein leeres Div für den xs-Offset hinzufügen (dies würde es Ihnen ersparen, den Inhalt an mehr als einer Stelle verwalten zu müssen).

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

Die Bootstrap-Entwickler scheinen sich zu weigern, diese xs- ofsets und Push / Pull-Klassen hinzuzufügen, siehe hier: https://github.com/twbs/bootstrap/issues/9689

Sie können den Versatz nur für xs-Geräte festlegen, indem Sie die höheren Pixel mit dem Versatz 0 negieren. Wie so,

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

Ein Vorschlag, wann Sie einen Versatz machen möchten, aber bei besonders kleinen Breiten nicht in der Lage sind:

Verwenden Sie .hidden-xsund .visible-xs, um eine Version Ihres HTML-Blocks für besonders kleine Breiten und eine für alles andere zu erstellen (wobei Sie weiterhin einen Offset verwenden können).

Beispiel:

<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 funktioniert nicht, wenn Sie den Rand manuell auf dasselbe Element anwenden. Zum Beispiel

Im obigen Code wird der Offset nicht angewendet. Stattdessen wird ein Rand von 0 auto angewendet

Das war wirklich frustrierend, also habe ich einen Kern geschrieben, den man sich schnappen kann col-offset-xs-*. Mir ist auch aufgefallen, dass Bootstrap SASS Repo Bower, das diese Woche installiert wurde, nicht enthalten war, col-offset-sm-0so dass es auch shimmed ist, aber in vielen Fällen redundant sein wird.

Bootstrap 3 xs versetzte Unterlegscheibe

  /*

  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

Es funktioniert nicht, weil col-xs-offset-*es in der Medienabfrage erwähnt wird. wenn Sie es verwenden möchten, müssen Sie alle schweigen von den Offset (zB: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")

Dies ist jedoch nicht richtig, sollten sie col-xs-offset-*in der Medienabfrage erwähnen

// es funktioniert in Bootstrap 4, es gab einige Änderungen in der Dokumentation. Wir brauchen kein Präfix col-, nur offset-lg-3, z

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

// hier doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

Das im jsfiddle-Link verwendete Bootstrap-CSS hat kein CSS für col-xs-offset- *, weshalb das CSS nicht angewendet wird. Verweisen Sie auf die neueste Bootstrap-CSS.

Ab Boostrap 4.x ist col-xs-6 jetzt nur noch col-6

offset-xs-6 ist jetzt nur offset-6 .

Schon ausprobiert, funktioniert auf jeden Fall.

Das Problem ist, dass Sie die .name-Klasse anstelle der nameclass einfügen

Anstatt col-md-offset-4 zu verwenden, verwenden Sie stattdessen offset-md-4. Sie müssen col nicht mehr verwenden, wenn Sie versetzen. Verwenden Sie in Ihrem Fall Offset-xs-1, und dies funktioniert. Stellen Sie sicher, dass Sie den Ordner bootstrap.css wie folgt in Ihrem HTML-Code aufgerufen haben.

Nach dem neuesten Bootstrap v3.3.7 ist xs-Offseting zulässig. Siehe die Dokumentation hier Bootstrap Offseting . So können Sie verwenden

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

Nur für den Fall, dass jemand den gleichen Fehler macht, den ich vor dem Stolpern auf dieser Seite gemacht habe, CSSdh das Hinzufügen von Rücksetzregeln (wie das sehr beliebte Zurücksetzen von Eric Meyer, das auf Millionen von Websites verwendet wird), nachdem Bootstrap hinzugefügt wurde .

Vielleicht sollte ich auch darauf hinweisen, dass ein solches Zurücksetzen mit Bootstrap nicht erforderlich ist, da Bootsrap tatsächlich das Zurücksetzen von normalize.css v3.0.2 implementiert .

Entfernen Sie den Punkt vor Ihrer Klasse, damit er folgendermaßen aussieht:

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