Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
You last visited: Today at 22:32

  • Please register to post and access all features, it's quick, easy and FREE!


Bootstrap Timeline Problem

Reply
 
Old   #1
 
elite*gold: 0
Join Date: Jun 2013
Posts: 376
Received Thanks: 65
Question Bootstrap Timeline Problem

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



lnqlorlouz is offline  
Old 09/24/2018, 19:36   #2

 
elite*gold: 2
The Black Market: 230/0/0
Join Date: Apr 2011
Posts: 9,034
Received Thanks: 2,102
Quote:
Originally Posted by lnqlorlouz View Post
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:
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
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


.ƒaℓsє. is online now  
Thanks
1 User
Old 09/24/2018, 19:52   #3
 
elite*gold: 0
Join Date: Jun 2013
Posts: 376
Received Thanks: 65
Quote:
Originally Posted by .ƒaℓsє. View Post
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 ****, kein Wunder hab ich das nicht gefunden...ich hab nie auf das ::after beim Untersuchen des Elements geklickt, vielen Dank!
lnqlorlouz is offline  
Reply

Tags
bootstrap, css, html, problem, twitter


Similar Threads
Problem mit Bootstrap Template
04/30/2016 - Web Development - 2 Replies
Hey, möchte gerne dieses Bootstrap Template benutzten, bekomme es aber nicht wirklich zum laufen: https://github.com/tui2tone/flat-admin-bootstrap-templates Wenn ich es auf meinen Server haue, werde ich immer zu dieser Domain weitergeleitet: Flat Admin V.2 - Free Bootstrap Admin Templates anstatt auf meine Domain. Auch kann ich nicht wirklich was einstellen. Hoffe mir kann jmd helfen ;)
[Selling] ~★ Bootstrap based website modal ★~
10/20/2014 - Metin2 Trading - 0 Replies
#Screenshots Effetto avvio homepagehttp://i.imgur.com/PlYHMxQ.gif Panoramica homepagehttp://i.imgur.com/Tk23Dvw.gif Pagina registrazionehttp://i.imgur.com/9RS166x.gif
Bootstrap session_start(); Fehler!
12/13/2013 - Web Development - 6 Replies
Einige von euch kennen wahrscheinlich Bootstrap, ich habe jetzt eine Seite "entwickelt" mit Bootstrap. Und jetzt kommt ein Fehler beim erstellen eines Logins. Fehler: Warning: session_start() : Cannot send session cookie - headers already sent by (output started at /users/computerstream/www/index.php:1) in /users/computerstream/www/index.php on line 2 Warning: session_start() : Cannot send session cache limiter - headers already sent (output started at...
PHP Bootstrap problem ( white row )
11/29/2013 - Web Development - 2 Replies
hello all, i am creating web page for school project and when I created switch, some white rows appears on web page: http://www.hojko.com/download/file.php?id=121629&mode=view/wat.jpg index.php <?php session_start(); ob_start(); header("Content-Type: text/html; char - Pastebin.com Can you help me how to delete those white rows? thanks :)
[C++]Bootstrap DLL
05/01/2012 - C/C++ - 3 Replies
Hi Com. Ich habe folgendes Problem: Ich habe eine C# DLL die eine Form anzeigen soll, nachdem ich sie in ein Prozess injiziert habe. public static int MyMethod(String pwzArgument) { Form1 F1 = new Form1(); F1.Show();



All times are GMT +1. The time now is 22:32.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Abuse
Copyright ©2018 elitepvpers All Rights Reserved.