Überprüfen Sie, ob Elemente die Elternbreite erweitern - css, twitter-bootstrap, position

Ich weiß nicht, wie ich das erklären soll, aber hier gehe ich:

Bildbeschreibung hier eingeben

Ich habe 2 Knöpfe (variable Breite, abhängig vonder Text innerhalb), die nebeneinander positioniert sind (Bild oben). Wenn ich meinen Bildschirm kleiner mache (Bild unten), vergrößern die Buttons die Breite und Position der Eltern untereinander. Gibt es eine Möglichkeit zu überprüfen, wann dies passiert?

Ich möchte einen Rand setzen (also Tasten nicht aneinander haften) und eine feste Breite einstellen, NUR wenn die Tasten aus Designgründen untereinander positioniert sind.

Soweit ich weiß, rendert jeder Browser ein bisschen anders, und ich will auch eine Lösung, die weiter funktioniert, wenn ich mich entscheide, den Knopftext zu ändern.

Wie würdest du das machen? Gibt es ein Plugin oder ein einfaches jQuery-Skript, das dies überprüfen kann?

Das habe ich bisher: JSFidel

<div class="cta-buttons-wrapper text-center">
<a href="/profiles" class="btn btn-primary">this is button one</a>
<a href="/register" class="btn btn-primary-reversed">and button two</a>
</div>


.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }

.btn{
margin: auto 25px;
// ...
}

.btn-primary{
color: #fff;
background-color: lightgreen;
border-color: lightgreen;
}

.btn-primary-reversed{
color: lightgreen;
background-color: #fff;
border-color: lightgreen;
}

Antworten:

1 für die Antwort № 1

Wenn Sie keine Buttons hinzufügen möchten, fügen Sie folgende CSS hinzu

.cta-buttons-wrapper .btn{ margin: 10px 15px; }

Und für die Schaltflächenbreite müssen Sie eine bestimmte Breite für die Medienabfrage festlegen

@media (max-width: 767px) {
.cta-buttons-wrapper .btn
{
display:block;
width:60%;
}
}

1 für die Antwort № 2

Dies kann ohne die Notwendigkeit einer jQuery erreicht werdenPlugin, in CSS können Sie eine Medienabfrage für bestimmte Bildschirmgrößen deklarieren und innerhalb dieser Medienabfrage können Sie verschiedene Stile für die Schaltflächen hinzufügen, die nur bei dieser Bildschirmgröße gelten, beispielsweise wenn die Schaltflächen nicht wie gewünscht auf dem mobilen Bildschirm angezeigt werden Größen würden Sie die folgende Medienabfrage hinzufügen, die bei Bildschirmgrößen, die 767px oder weniger sind, wie folgt auslösen:

@media (max-width: 767px) {
.cta-buttons-wrapper .btn {
display:block;
width: 100%; /* this will make the buttons span the width of the parent div */
margin: 0 0 30px 0;
}
}

Ich habe es erklärt width: 100%; so dass die Tasten die Breite des Eltern-Div nur auf Handy überspannen und wenn Sie mehr Text hinzufügen, sieht es immer noch ordentlich aus, während es bei einer festen Breite nicht diese Flexibilität gibt.

Hier ist ein aktualisierter Link zu deiner Geige mit meiner hinzugefügten Lösung: Geige


0 für die Antwort № 3

Sie können dies einfach mit CSS tun.

@media (max-width: 767px) {
.btn {
margin: 25px;
}
}

Verwandte Fragen
Speisekarte