Ich erstelle eine Rails-App und versuche, eine bestimmte Funktionalität in Bezug auf Twitter's Bootstrap zu erreichenZusammenbruch. Halte es mit mir aus, wenn ich es erkläre.

Ich habe derzeit folgende Ansicht:

Wenn Sie auf eine dieser Schaltflächen klicken, wird deren Datenumschalt-Div erweitert. Die Ansicht ist wie folgt aufgebaut:

    <button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>

    <div class="collapse indent" id="keys">
        <!--content-->
    </div>

    <div class="collapse indent" id="attrs">
        <!--content-->
    </div>

    <div class="collapse" id="edit">
        <!--content-->
    </div>

Ich habe sie so eingerichtet, weil ich die Tasten nebeneinander in einer Reihe haben möchte. Wenn ich die Schaltflächen so bewege, dass sie sich direkt über der Ansicht befinden, werden sie vergrößert / verkleinert, und die Schaltflächen werden übereinander gestapelt.

Mein Endziel ist es also, die drei Schaltflächen nebeneinander zu platzieren und ihre jeweiligen Abschnitte zu reduzieren und zu erweitern. Das aktuelle Setup funktioniert allerdings etwas umständlich. Wenn zum Beispiel jemand den Schlüsselbereich erweitert und dann den Attributbereich erweitert, muss er unter den Schlüsselbereich scrollen.

Es gibt zwei mögliche Lösungen für dieses Problem. Eines ist, dass das Drücken einer Taste bewirkt, dass die anderen 2 sich zusammenbrechen. Dies würde bedeuten, dass zu einem bestimmten Zeitpunkt nur einer dieser Abschnitte erweitert wird.

Ich denke, die bessere Lösung wäre es, wenn die Schaltflächen nach rechts nach unten verschoben werden, wenn die Tasten erweitert werden, und wenn die Attribute erweitert werden, wird die Schaltfläche zum Bearbeiten von Details nach unten verschoben . Ist das möglich? Ich habe es bereits versucht, indem ich die Schaltflächen übereinander gestapelt und ihre relativen Positionen über CSS geändert habe, aber das hat nicht funktioniert, weil die anderen Schaltflächen bei der Erweiterung eines Abschnitts an unangenehmen Stellen in der Leiste gelandet sind Mitte des erweiterten Abschnitts.

Zuletzt möchte ich versuchen, dies ohne das auf der Bootstrap-Seite von Twitter erwähnte Verhalten im Akkordeonstil zu tun, aber wenn mich jemand aus gestalterischer Sicht davon überzeugen kann, dass es vorzuziehen ist, würde ich es mit Sicherheit noch einmal überdenken.