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

问题是 using.btn-group创建了一个<div>with 类btn-group- div 通常是块级元素（除非您以其他方式设置它们的样式），因此它们自己占据了一整行。

为了解决这个问题，您可以做的就是使用跨度：

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

按钮仍将按预期运行 - Bootstrap 不关心您的按钮组是跨度还是 div。

这是一个例子。