Bootstrap Timeline Problem

09/24/2018 19:23 lnqlorlouz#1

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 [Only registered and activated users can see links. Click Here To Register...] 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:
[Only registered and activated users can see links. Click Here To Register...]
Richtig:
[Only registered and activated users can see links. Click Here To Register...]
Code f�r die Timeline mit der 3:

HTML Code:

                <!-- 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 :bandit:

09/24/2018 19:36 False#2

Quote:

Originally Posted by lnqlorlouz

HTML Code:

                <!-- 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 :bandit:

Code:

.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

09/24/2018 19:52 lnqlorlouz#3

Quote:
Originally Posted by .�aℓsє.
Code:
.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 shit, kein Wunder hab ich das nicht gefunden...ich hab nie auf das ::after beim Untersuchen des Elements geklickt, vielen Dank! :p