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>with类btn-group- div通常是块级元素(除非你已经设置了它们),因此占用了整行.

你可以做的事情是使用跨度代替:

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

按钮仍将按预期运行 - Bootstrap不关心您的按钮组是span还是div.

这是一个例子.