Tworzę aplikację Rails i próbuję osiągnąć określoną funkcjonalność związaną z Bootstrapem Twitterazawalić się. Znoś się ze mną, jak to wyjaśnię.

Obecnie mam następujący widok:

Po kliknięciu każdego z tych przycisków rozszerza się ich przełącznik przełączania danych. Widok jest skonfigurowany w następujący sposób:

    <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>

Mam je tak skonfigurowane, ponieważ chcę, żeby przyciski były obok siebie, w rzędzie. Jeśli przesunę przyciski, aby znajdowały się tuż nad widokiem, który rozszerzają / zwijają, wtedy przyciski układają się jeden na drugim.

Tak więc moim celem jest posiadanie trzech przycisków obok siebie i ich zwinięcie i rozwinięcie odpowiednich sekcji. Obecna konfiguracja działa, jednak jest trochę niezręczna. Na przykład, jeśli ktoś rozszerzy sekcję klawiszy, a następnie rozszerzy sekcję atrybutów, musi przewinąć poniżej sekcji kluczy.

Istnieją dwa możliwe rozwiązania tego problemu. Jednym z nich jest to, że naciśnięcie jednego przycisku powoduje upadek pozostałych 2 przycisków. Oznaczałoby to, że w danym momencie tylko jedna z tych sekcji zostanie rozszerzona.

Lepsze rozwiązanie, myślę, że byłoby tak, że gdy klawisze zostaną rozwinięte, przyciski po prawej stronie przesuną się w dół na dół klawiszy div, a gdy atrybuty zostaną rozwinięte, przycisk edycji szczegółów przesunie się na dół tego diva . czy to możliwe? Próbowałem już to zrobić, pozwalając przyciskom układać się jeden na drugim i zmieniać ich względne lokalizacje za pomocą css, ale to nie zadziałało, ponieważ gdy jedna z sekcji została rozwinięta, pozostałe przyciski znalazły się w niewygodnych miejscach w środek rozszerzonej sekcji.

Na koniec chciałbym spróbować zrobić to bez zachowania stylu akordeonu, jak wspomniano na stronie bootstrapu twittera, ale jeśli ktoś może przekonać mnie z punktu widzenia projektu, że jest to lepsze, z pewnością ponownie rozważę.