Tasten auf der gleichen Zeile in twitter bootstrap

Gibt es Knöpfe und einen Knopf-Gruppe 

%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

Ich möchte, dass alle diese 7 Knöpfe werden auf der gleichen Linie. Jetzt sind Sie auf den verschiedenen Linien: die ersten 3 Einsen in einer Zeile und der rest von Ihnen auf eine andere Zeile. Auch wenn ich div auf und setzen Sie in es, ändert sich nichts.

Wie kann ich das erreichen?

  • können Sie zeigen eine bildliche Darstellung oder eine test-Seite oder auch js-fiddle
  • Bild der verschiedenen Linien?
  • ja ,btw ich kann werfen ein jsfiddle mit wat ya müssen , wenn ya helfen ?
  • Nur wickeln Sie die ersten drei Schaltflächen in einem container und legen Sie es auf "display: inline-block". Das sollte wohl es mit den anderen drei in der button-Gruppe.
InformationsquelleAutor Alan Coromano | 2013-02-27
  1. 5

    Das Problem ist, dass mit .btn-group schafft eine <div> mit Klasse btn-group - divs sind in der Regel block-level-Elemente (es sei denn, Sie haben Stil, Sie anders) und nehmen somit eine ganze Zeile für sich.

    Etwas, das Sie tun können, um dies zu umgehen, ist die Verwendung eines span statt:

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

    Werden die buttons immer noch so Verhalten, als erwartet - Bootstrap kümmert sich nicht, ob Ihre Schaltfläche-Gruppe ist ein span oder div.

    Hier ist ein Beispiel.

    InformationsquelleAutor BaronVonBraun
Schreibe einen Kommentar