In Bezug auf BS 3 könnte ich eine Offset-Klasse von 9 und eine Spalte von 3 verwenden, wenn ich nur eine schmale Inhaltsspalte rechts haben möchte.
Was aber, wenn ich das Gegenteil und auf der linken Seite wollte? Gibt es eine richtige Möglichkeit, dies in BS zu tun, oder sollte ich nur meine eigenen CSS-Methoden verwenden? Ich dachte daran, eine 3er-Spalte mit meinem Inhalt und nur eine leere 9er-Spalte zu erstellen.
twitter-bootstrap-3
Zusammenarbeiten2013
quelle
quelle
col-X-pull-Y
Klassen. Zum Beispiel, um etwas mit einer Größe von 50% nach rechts zu verschieben, aber eine Spalte nach rechts zu lassen (in einem Raster mit 12 Spalten als Beispiel):col-xs-6 pull-right col-xs-pull-1
col-xs-6
), wird er sich seltsam stapeln.Ich verwende das folgende einfache benutzerdefinierte CSS, das ich geschrieben habe, um dies zu erreichen.
quelle
quelle
Ich habe Bootstrap SASS (v3.3.5) basierend auf Rukshans Antwort modifiziert
Fügen Sie dies am Ende des
calc-grid-column
Mixinsmixins/_grid-framework.scss
direkt unter der$type == offset
if-Bedingung hinzu.Ändern Sie das
make-grid
Mixinmixins/_grid-framework.scss
, um dieoffset-right
Klassen zu generieren .Sie können dann die Klassen wie
col-sm-offset-right-2
und verwendencol-md-offset-right-1
quelle
percentage
anstelle der Hardcodierung der Werte; Dies entspricht eher der internen Behandlung des Rastersystems durch Bootstrap und ermöglicht eine variable Rasterspalte, wenn die Standardeinstellung 12 unerwünscht ist.Basierend auf der Antwort von WeNeigh ! Hier ist ein WENIGER Beispiel
quelle
Da scheint Google diese Antwort zu gefallen ...
Wenn Sie der Namenskonvention von Bootstrap 4 entsprechen möchten, dh Offset - * - #, finden Sie hier die folgende Änderung:
quelle
Sie müssen mehrere Klassen kombinieren (
col-*-offset-*
für den linken Rand undcol-*-pull-*
um ihn nach rechts zu ziehen)Sie müssen es also nicht manuell in verschiedene Zeilen unterteilen.
quelle
Hier ist die gleiche Lösung wie bei Rukshan, jedoch in sass (um Ihre Gitterkonfiguration beizubehalten) für Sonderfälle, die nicht mit der Ross Allen-Lösung funktionieren (wenn Sie keine übergeordnete div.row haben können).
quelle
quelle