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 .