[CSS] Bootstrap Timeline Problem

[lnqlorlouz]

Hi,

ich habe eine Timeline mit Bootstrap auf meiner Seite, allerdings hab ich einen kleinen Fehler und kann ihn nicht finden. Die Seitenlinie wird nicht richtig verbunden mit dem oberen...
Ich hab hier einen gemacht, dann kann man das Problem besser nachvollziehen.
Rechts klappt es, allerdings links nicht so wie ich es mir vorstelle.
Ich hab irgendwo bei der 3 einen Fehler, ich versuche schon seit zwei Stunden den Fehler zu finden oder was ich falsch gemacht habe.
Falsch:

Richtig:

Code für die Timeline mit der 3:

                <!-- 2. section end-->
                <div class="row timeline">
                    <div class="col-2">
                        <div class="corner right-bottom"></div>
                    </div>
                    <div class="col-8">
                        <hr />
                    </div>
                    <div class="col-2">
                        <div class="corner top-left"></div>
                    </div>
                </div>
                <!-- 3. section-->
                <div class="row align-items-center how-it-works d-flex">
                    <div class="col-2 text-center full d-inline-flex justify-content-center align-items-center">
                        <div class="circle font-weight-bold">3</div>
                    </div>
                    <div class="col-6">
                        <h5>2014</h5>
                        <p>
                           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                    </div>
                </div>
                <!-- 3. section end-->
                <div class="row timeline">
                    <div class="col-2">
                        <div class="corner top-right"></div>
                    </div>
                    <div class="col-8">
                        <hr />
                    </div>
                    <div class="col-2">
                        <div class="corner left-bottom"></div>
                    </div>
                </div>

Ich kann mir nicht vorstellen, dass es am CSS liegt.

Grüße

[False]

Originally Posted by lnqlorlouz

Hi,

ich habe eine Timeline mit Bootstrap auf meiner Seite, allerdings hab ich einen kleinen Fehler und kann ihn nicht finden. Die Seitenlinie wird nicht richtig verbunden mit dem oberen...
Ich hab hier einen gemacht, dann kann man das Problem besser nachvollziehen.
Rechts klappt es, allerdings links nicht so wie ich es mir vorstelle.
Ich hab irgendwo bei der 3 einen Fehler, ich versuche schon seit zwei Stunden den Fehler zu finden oder was ich falsch gemacht habe.
Falsch:

Richtig:

Code für die Timeline mit der 3:

                <!-- 2. section end-->
                <div class="row timeline">
                    <div class="col-2">
                        <div class="corner right-bottom"></div>
                    </div>
                    <div class="col-8">
                        <hr />
                    </div>
                    <div class="col-2">
                        <div class="corner top-left"></div>
                    </div>
                </div>
                <!-- 3. section-->
                <div class="row align-items-center how-it-works d-flex">
                    <div class="col-2 text-center full d-inline-flex justify-content-center align-items-center">
                        <div class="circle font-weight-bold">3</div>
                    </div>
                    <div class="col-6">
                        <h5>2014</h5>
                        <p>
                           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                    </div>
                </div>
                <!-- 3. section end-->
                <div class="row timeline">
                    <div class="col-2">
                        <div class="corner top-right"></div>
                    </div>
                    <div class="col-8">
                        <hr />
                    </div>
                    <div class="col-2">
                        <div class="corner left-bottom"></div>
                    </div>
                </div>

Ich kann mir nicht vorstellen, dass es am CSS liegt.

Grüße

.how-it-works.row .col-2.full::after {
    height: 100%;
    left: calc(50% - 3px);
}

Schau dir das mal an (Zeile 147), evtl. fällt dir was auf :P

[lnqlorlouz]

Originally Posted by .ƒaℓsє.

.how-it-works.row .col-2.full::after {
    height: 100%;
    left: calc(50% - 3px);
}

Schau dir das mal an (Zeile 147), evtl. fällt dir was auf :P

Ach ****, kein Wunder hab ich das nicht gefunden...ich hab nie auf das ::after beim Untersuchen des Elements geklickt, vielen Dank!