2

There are buttons and one button group 

%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

I want all these 7 buttons to be on the same line. Now they are on the different lines: the 3 first ones on one line and the rest of them on a different line. Even if I add div on and place all them into it, nothing changes.

How do I achieve that?

4

1 に答える 1

5

問題は、.btn-groupcreates <div>with classを使用することbtn-groupです。divは通常ブロックレベルの要素であり（他のスタイルを設定していない限り）、したがって、行全体を占めることになります。

これを回避するためにできることは、代わりにスパンを使用することです。

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

ボタンは引き続き期待どおりに動作します-Bootstrapは、ボタングループがspanであるかdivであるかを気にしません。

これが例です。

于 2013-02-27T16:43:20.450 に答える