Bootstrap-4-Karte/panel mit dem Bild Links im header und Titel

Dachte ich, was ich bin versucht zu tun, wäre ziemlich einfach zu tun, aber ich kann einfach nicht damit es funktioniert.

Habe ich versucht zu tun, pull-Links auf die bootstrap-Karten und Tafeln und es nicht so funktioniert, wie ich es möchte...

Hier ist ein Bild von, was möchte ich erreichen,

Beispiel

Heres der code, der fast funktioniert

<div class="card text-center" *ngFor="let event of eventActivities">
    <div class="card-header pull-left">
        <img src="..." alt="">

        Title </div>
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <p class="card-text">Description</p>
        <a href="#" class="btn btn-primary">BUTTON</a>
    </div>
    <div class="card-footer text-muted">
        FOOTER
    </div>
</div>

InformationsquelleAutor RealmSpy | 2018-03-06

  1. 26

    Gibt es ein paar verschiedene Möglichkeiten, wie Sie dies tun könnte. Hier ist eine Möglichkeit, mit der flex-row und flex-wrap utility-Klassen zu ändern, das layout der Elemente im inneren der Karte...

    https://www.codeply.com/go/l1KAQtjjbA

       <div class="card flex-row flex-wrap">
        <div class="card-header border-0">
            <img src="//placehold.it/200" alt="">
        </div>
        <div class="card-block px-2">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Description</p>
            <a href="#" class="btn btn-primary">BUTTON</a>
        </div>
        <div class="w-100"></div>
        <div class="card-footer w-100 text-muted">
            FOOTER
        </div>
    </div>

    Hier ist ein anderer Ansatz mit dem Gitter...

      <div class="card">
        <div class="row no-gutters">
            <div class="col-auto">
                <img src="//placehold.it/200" class="img-fluid" alt="">
            </div>
            <div class="col">
                <div class="card-block px-2">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">Description</p>
                    <a href="#" class="btn btn-primary">BUTTON</a>
                </div>
            </div>
        </div>
        <div class="card-footer w-100 text-muted">
            Footer stating cats are CUTE little animals
        </div>
  </div>

    https://www.codeply.com/go/l1KAQtjjbA

    Ich bin mir nicht sicher, warum Sie text-center wie nichts, es zentriert in der gewünschten Beispiel-Bild.

    Ich bekomme es jetzt. Die flex-row im card div läuft der Header, Body und Footer horizontal. Sie Hinzugefügt flex-wrap zu den card div und w-100 zu den card-footer schieben Sie den Footer so weit aus, wie haben es wrap/fallen senkrecht unter dem Header und dem Body. Dann ist die einzige Sache Links zu tun, war fix der extra-dicken Rand unter die Header, die hast du ja in der card-header div durch hinzufügen border-bottom-0. Sehr Clever! FYI: ich entfernte die <div class="w-100"></div> und es lief das gleiche ohne Sie. Vielen Dank für die codeply Beispiel!
    wenn die Beschreibung zu lang waren, der Absatz bricht das layout..habe es gerade getestet
    Ich glaube, das ist der Grund, warum Zim Hinzugefügt, das Alternative Beispiel. Wenn Sie row und col dann konnten Sie Ihr card-header in der 1. col und card-block in der 2. col und die längere Beschreibung wird immer noch angezeigt, horizontal neben dem Kopf und sieht identisch mit einer kurzen Beschreibung, ohne die row und col.

    InformationsquelleAutor Zim

Schreibe einen Kommentar