Bootstrap 3时间轴响应

时间:2014-05-21 14:47:14

标签: javascript css twitter-bootstrap twitter-bootstrap-3

所以我找到了Bootstrap 3的时间轴: here's the original timeline

但我想更改它看起来像这样:

here's my jsfiddle

<div class="container">
<div class="page-header">
    <h1 id="timeline">Aktuelles</h1>
</div>
<ul class="timeline">
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-panelimg">
            <img src="images/Icons_Blog/rosetta.png">
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Die Reise des Satelliten Rosetta</h4>
            </div>
            <div class="timeline-body">
                <p>Die Geschichte des Satelliten „Rosetta" und dem Lander „Philae" hat etwas von einem Märchen. Die Beiden
                    begaben sich vor langer Zeit auf eine Reise zum weit entfernten Kometen „67P/Tschurjumow-Gerassimenko"
                    um aller Welt zu zeigen, wie die Urmaterie des Sonnensystems aussieht. Bevor sie den Kometen allerdings
                    erreichen konnten, verfallen sie in einen tiefen SChlaf. Aber alles ist gut, denn der Satellit konnte rechtzeitig
                    aus dem Dornröschenschlaf aufwachen, um sich auf seine noch bevorstehende Aufgabe vorzubereiten.
                    Design & Data hat einen charmanten Zeichentrickfilm für die ESA produziert, der die bisherige Reise von Rosetta
                    und ihrem Begleiter Philae zusammenfasst.</p>
            </div>
            <div>
                <ul class="aktuelltag">
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Rosetta</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Rosetta</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Rosetta</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Rosetta</li>
                    <ul class="aktuelltagweiter">
                        <li class="aktuelllistweiter"><a href="#"><img src="images/Icons_Blog/arrow_right.png"> Weiterlesen</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-panelimg">
            <img src="images/Icons_Blog/showreel.png">
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Showreel 2014</h4>
            </div>
            <div class="timeline-body">
                <p>Wie die Zeit vergeht - genau drei Jahre gibt es Design & Data jetzt schon. Wir haben anlässlich unseres dreijährigen
                    Jubiläums ein Showreel erstellt, das die schönsten und interessantesten Projekte noch einmal präsentieren soll.
                    Das Showreel umfasst die vielfältigen Seiten unserer Arbeit - von Drehs in der Wüste über Animationen und Motiondesign
                    bis hin zum neu produzierten ESA Zeichentrickfilm.</p>
            </div>
            <div>
                <ul class="aktuelltag">
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Showreel</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Showreel</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Showreel</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> Showreel</li>
                    <ul class="aktuelltagweiter">
                        <li class="aktuelllistweiter"><a href="#"><img src="images/Icons_Blog/arrow_right.png"> Weiterlesen</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-panelimg">
            <img src="images/Icons_Blog/dlr.png">
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">DLR-DVD „Mars - Ein Planet voller Rätsel"</h4>
            </div>
            <div class="timeline-body">
                <p>Das Deutsche Zentrum für Luft- und Raumfahrt (DLR) beschäftigt sich unter Anderem mit der Erforschung des
                    Mars. Das DLR ist an der ESA Mission „Mars Express" mit einer hochauflösenden 3D Kamera beteiligt und liefert
                    mit ihr ständig neue Daten zur Beschaffenheit des Roten Planeten. Wir haben eine DVD für das DLR produziert,
                    in der dessen Experten einen Überblick über den aktuellen Stand der Marsforschung in zweisprachigen Interviews
                    liefern. Die DVD trägt den Titel „Mars - Ein Planet voller Rätsel".</p>
            </div>
            <div>
                <ul class="aktuelltag">
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> DLR DVD</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> DLR DVD</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> DLR DVD</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> DLR DVD</li>
                    <ul class="aktuelltagweiter">
                        <li class="aktuelllistweiter"><a href="#"><img src="images/Icons_Blog/arrow_right.png"> Weiterlesen</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-panelimg">
            <img src="images/Icons_Blog/ecmwf.png">
        </div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Weltmarktführer ECMWF</h4>
            </div>
            <div class="timeline-body">
                <p>Die Wetterkarte ist für uns alle etwas Alltägliches. Die Wissenschaft, die die Wettervorhersage möglich macht,
                    ist aber alles andere als alltäglich. Sie erfordert den talentierten Verstand von vielen fähigen Wissenschaftlern -
                    wie die des ECMWF. Das European Centre for Medium-Range Weather Forecasts (ECMWF) ist Weltmarktführer in
                    numerischer Wettervorhersage. Sie forschen nach immer besseren Möglichkeiten das Wetter vorherzusehen.
                    Wir stellen die Wetterexperten in unserem neuen Video vor.</p>
            </div>
            <div>
                <ul class="aktuelltag">
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> ECMWF</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> ECMWF</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> ECMWF</li>
                    <li class="aktuelllist"><img src="images/Icons_Blog/tag.png"> ECMWF</li>
                    <ul class="aktuelltagweiter">
                        <li class="aktuelllistweiter"><a href="#"><img src="images/Icons_Blog/arrow_right.png"> Weiterlesen</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </li>
</ul>

我完成了(这里有一些小错误)。

但它没有回应。我想我为此踢了一下,或者没有做正确的订单。谁能告诉我我做错了什么?因为我确实做错了!帮助请

0 个答案:

没有答案