twitter bootstrap中同一行的按钮

Question

有按钮和一个按钮组

%button.btn{type: :submit}button1
%button.btn{type: :submit}button2
%button.btn{type: :submit}button3

.btn-group{"data-toggle" => "buttons-radio"}
  %button.btn.btn-primary.active{type: :button}
    button4
  %button.btn.btn-primary.active{type: :button}
    button5
  %button.btn.btn-primary.active{type: :button}
    button6
  %button.btn.btn-primary.active{type: :button}
    button7

我希望所有这7个按钮都在同一条线上。现在它们处于不同的界限：一条线上的3个第一条线和其余线条上的其余线条。即使我添加了div并将它们全部放入其中，也没有任何变化。

我如何实现这一目标？

Answer 1

问题是使用.btn-group创建了一个<div>类btn-group - div通常是块级元素（除非你已经设置了它们），因此占用了整个他们自己。

你可以采取的措施是改为使用跨度：

%span.btn-group{"data-toggle" => "buttons-radio"}
  %button ... etc ...

按钮仍然会按预期运行 - Bootstrap不关心您的按钮组是span还是div。

这是一个example。