bootstrap html css toggle mehr info div

Wenn ich eine <div class="parent"></div> habe Ich möchte diese Art von Karte so, dass an der Basis der Karte muss ich eine plus Schaltfläche hinzufügen. Wenn die Plus-Schaltfläche angeklickt wird, wird ein anderer zu zeigender Div angezeigt, die Schaltfläche wechselt zu minus. Wenn die Minus-Schaltfläche angeklickt wird, wird das zusätzliche div-Element ausgeblendet, um zu der Anfangsphase zurückzukehren. Ich benutze Bootstrap und muss diese Karten in einer Reihe erstellen. Alle Elemente müssen sich innerhalb derselben befinden. parent div.bootstrap html css toggle mehr info div

In etwa so: Bitte beachten Sie diese 3 Bilder zeigen den Ereignislebenszyklus einer einzelnen Karte.

Meine Frage ist: Wie kann ich den Knopf in der Mitte des unteren Randes haben, und den Rand dort gleichzeitig halten, wenn der Kasten erweitert wird?

Mein Versuch: jsFiddle

Quelle

2017-03-07 user2818430

Was Sie bisher versucht haben, ? – ZimSystem

@ZimSystem: Bitte überprüfen Sie den jsFiddle Link. – user2818430

Danke. Also, was ist die Frage/Problem? Ist es das Problem mit dem Umschalten der anderen Karten oder dem Ändern des +/- Symbols? – ZimSystem

Ihr Versuch funktioniert. es sieht einfach nicht richtig aus. Sie benötigen einen Clearfix für das div, das angezeigt wird, wenn Sie auf die Schaltfläche klicken, da Sie Pull-left und Pull-right verwenden, die float left und float right verwenden. hier ist eine Arbeits Geige:
https://jsfiddle.net/njzskdqr/

mehr über clearfix zu lesen:
https://css-tricks.com/snippets/css/clear-fix/

nur die Klasse cf den Mutter hinzufügen mit Klasse Zusammenbruch

.cf::before, .cf::after{ 
    display: table; 
    content: ''; 
} 

.cf::after{ 
    clear:both; 
}

Quelle

2017-03-07 20:05:10

Wie kann ich den unteren Rand an Ort und Stelle halten? Derzeit, wenn Sie auf die Schaltfläche klicken, wird der untere Rahmen mit der Info-Box erweitert. Der untere Rand sollte an seinem Platz bleiben, und der Info-Kasten sollte unten erscheinen, was den Eindruck erweckt, dass es zwei anstatt eines Kastens sind. Wie in dem Bild, das ich oben, Schritt 2, gepostet habe, gibt es die Grenze, die die Haupt-Info-Box und die Mehr-Info-Box trennt. – user2818430

Sie müssen eine bestimmte Höhe geben –

Hier gehen Sie https://jsfiddle.net/njzskdqr/1/ –

Verwenden position: absolute für die Symbol-Schaltfläche ..

.btn.btn-info { 
    position: absolute; 
    z-index: 1; 
    top: 14px; 
    left: 50%; 
    transform: translateX(-50%); 
    border-radius: 50%; 
}

http://www.codeply.com/go/6TS1fcsXi6

Quelle

2017-03-07 19:53:58 ZimSystem

bootstrap html css toggle mehr info div

Antwort

Verwandte Themen