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

问题是使用.btn-group创建 <div>与类btn-group - div 通常是 block 级元素(除非您以其他方式设置它们的样式)，因此占用整行。

为了解决这个问题，您可以使用跨度来代替:

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

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

这是一个example .