我正在制作一个 Rails 应用程序，并试图实现与 Twitter 的 Bootstrap collapse相关的特定功能。请耐心等待我解释它。
我目前有以下看法：
单击每个按钮时，它们的数据切换 div 会展开。视图设置如下：
<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>
我将它们设置为这样，因为我希望按钮并排排列。如果我将按钮移动到它们展开/折叠的视图的正上方，那么按钮会相互堆叠。
所以，我的最终目标是让三个按钮并排放置，并让它们折叠和展开各自的部分。目前的设置工作，但有点尴尬。例如，如果有人展开键部分，然后展开属性部分，他们必须滚动到键部分下方。
这个问题有两种可能的解决方案。一是按下一个按钮会导致另外两个按钮自行折叠。这意味着在任何给定时间，只有这些部分中的一个被扩展。
更好的解决方案，我认为应该是这样，当键展开时，右侧的按钮会向下移动到键 div 的底部，而当属性展开时，编辑详细信息按钮会移动到该 div 的底部. 这可能吗？我已经尝试通过让按钮堆叠在一起并通过 css 更改它们的相对位置来做到这一点，但这不起作用，因为当其中一个部分展开时，其他按钮最终会出现在尴尬的位置展开部分的中间。
最后，我想尝试在没有 twitter 引导页面上提到的手风琴风格行为的情况下做到这一点，但如果有人能从设计的角度说服我它更可取，我肯定会重新考虑。