wake-up-neo.com

Bootstrap col-md-offset- * funktioniert nicht

Ich versuche, die Bootstrap-Offsetklasse in meinem Code hinzuzufügen, um eine diagonale Ausrichtung wie folgt zu erreichen:

 Image

Aber ich weiß nicht, welchen Offset ich verwenden soll. Ich habe ein paar Offsets ausprobiert, um dies zu erreichen, aber keinen Zweck. Der Text deckt den ganzen Jumbotron ab

Html:

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 col-md-offset-4">Browse.</h2>
                    <h2 class="col-md-4 col-md-offset-4">create.</h2>
                    <h2 class="col-md-4 col-md-offset-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

CSS:

.jumbotron {
    height: 500px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
}

.jumbotron h2 {
    color: white;
    font-size: 60px;
}

.jumbotron h2:first-child {
    margin: 120px 0 0;
}

Bitte führe mich. Danke im Voraus.

26
Aisha Salman

Ich würde in diesem Fall nicht empfehlen, das Grid-System zu verwenden, sondern einfach eine erhöhte Auffüllung für jeden <h2> hinzufügen. Die Vorgehensweise, die Sie mit col-*-offset-* erreichen würden, würde folgendermaßen aussehen:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

Im Wesentlichen muss die erste Zeile die gesamte Zeile umfassen (also -12). Die zweite Zeile muss um 1 Spalte versetzt sein, Sie müssen also um 1 versetzt sein und eine Gesamtbreite von 11 Spalten (11 + 1 = 12) usw. angeben. Ihr Offset ist immer ausreichend, um sicherzustellen, dass die Gesamtanzahl der Spalten 12 beträgt.

18
Robert

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

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

Hier doc .

115
Vasyl Gutnyk

Das Ändern von col-md-offset-* in offset-md-* hat für mich funktioniert

15
sriram26

überprüfe dies bootply

das ist falsch, weil bootstrap mit margin-left verwendet wird: **%

.jumbotron h2:first-child {
   margin: 120px 0 0;
}
2
Cem Arguvanlı

Sollte sein :

<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>
1
Mr Geek

Wo ist das Problem?

In Ihrem HTML-Code haben alle h2s den gleichen Versatz von 4 Spalten, sodass sie keine Diagonale bilden.

Wie man es repariert

Eine row hat 12 Spalten, daher sollten wir jeden h2 in seine eigene row..__ einfügen.

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-4 col-md-offset-1">Browse.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-2">create.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

Eine Alternative besteht darin, jede h2 Breite plus Versatzsumme 12 Spalten zu machen, sodass jede Spalte automatisch in eine neue Zeile eingefügt wird.

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-11 col-md-offset-1">Browse.</h2>
                <h2 class="col-md-10 col-md-offset-2">create.</h2>
                <h2 class="col-md-9 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>
1
Daniele Barresi

Bootstrap 4-Versatzklassen wurden in Beta 1 entfernt, werden jedoch in Beta 2 - Topic-Referenz wiederhergestellt.

1
user947668

Wenn Sie zum Beispiel eine Spalte über nur 4 Spalteneinheiten verschieben möchten, würde ich vorschlagen, wie in meinem Beispiel unten nur einen Platzhalter zu verwenden

<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>
1
lionelsanou

Wenn Sie mit kleinen Tweak - Zufrieden sind, wissen wir, dass Bootstrap mit einer Breite von 12 arbeitet

<div class="row">
      <div class="col-md-1">
            Keep it blank it becomes left offset
      </div> 
      <div class="col-md-5">
      </div>
      <div class="col-md-5">
      </div>
      <div class="col-md-1">
            Keep it blank it becomes right offset
      </div
</div>

Ich bin sicher, dass es einen besseren Weg gibt, dies zu tun, aber ich hatte es eilig, also habe ich diesen Trick benutzt

0
Karthik Sagar

In Bootstrap 3 lautet das Format 

col-md-6 col-md-offset-3

Für das gleiche Raster in Bootstrap 4 lautet das Format 

col-md-6 offset-md-3