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>
col-xs-*Klassen handelt.
Antworten:
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
.col-xs-offset-*existiert in Bootstrap 3
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
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>
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.
/*
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;
}
}
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
xsOffset, nicht nach Offsets im Allgemeinen. Ich kann in den Dokumenten nichts über einen xs-Offset finden und ihn auch nicht durch Hinzufügen von xs-Offset-Klassen im DOM auslösen. Hoffentlich irre ich mich, aber ich kann es nicht herausfinden.
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.
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 .
-xsin v4 fallen gelassen werden, finden Sie diese .