Volle Breite Split Dropdown-Button in Twitter Bootstrap

Ich habe einen Platz auf meiner Website, die mit einem Bündel von button Elemente gestylt mit btn-block (Beispiel aus dem Twitter Bootstrap Docs). Ich möchte nun wechseln einige von Ihnen zu split-Tasten (Beispiel), aber ich kann nicht scheinen, um die split-Tasten und die normalen Tasten, um die gleiche Länge.

Habe ich experimentierte mit allen möglichen Dingen, aber ich kann nicht scheinen zu finden ein Weg, dies zu tun. Hat schon mal jemand es geschafft, es zu tun? Halten Sie im Verstand, ich will nicht zu hart-code die Breite von Elementen, wenn ich nicht muss. (Beachten Sie, dass diese nicht hart codiert Prozentangaben.) Wenn es absolut notwendig ist, ich bin OK mit der Definition einer Breite für den toggle-Teil der Schaltfläche (weil ich weiß, es wird nur ein einziger Pfeil-Zeichen drin), aber angeben wollen, als ein paar "Magische zahlen" wie möglich, damit der code wartbar in die Zukunft.

können Sie duplizieren das problem in ein jsfiddle?
Oops, ich habe vergessen zu posten, dass man. Hier: jsfiddle.net/eBJGW/4
link der bootstrap-css als auch
Die Bootstrap-CSS verknüpft ist, in der "Ressourcen Verwalten" - Reiter auf der Seite der JSFiddle Seite. Es ist die unveränderte CSS aus dem Twitter Bootstrap-demo-Website.

InformationsquelleAutor Moshe Katz | 2013-02-04

  1. 5

    Ich war auf der Suche für die gleiche Art von Verhalten und fand das flexbox-Lösung: http://codepen.io/ibanez182/pen/MwZwJp

    Es ist eine elegante Umsetzung, die Verwendung der flex-grow Eigenschaft.

    Fügen Sie einfach die .btn-flex Klasse der .btn-group in den HTML-Code. Das ist CSS, die Sie brauchen: 

    .btn-flex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
}

.btn-flex .btn:first-child {
    flex-grow: 1;
}

    Kredit geht an den Autor des pen: Nicola Pressi

    Werde ich haben, check this out. Flexbox war noch nicht weit unterstützt genug, im Jahr 2013, wenn ich zuerst gefragt.

    InformationsquelleAutor sldk

  2. 1

    Wenn Sie fügen Sie die Klasse btn-block .btn-group-element, und geben Sie den dropdownbutton fest Elemente, % - breiten, das würde den trick tun.

    .dropdown-lead{
    width: 96%;
    box-sizing: border-box;
}
.dropdown-toggle{
    width: 4%;
    box-sizing: border-box;
}

    Hier ein Beispiel: http://jsfiddle.net/eBJGW/5/

    Diese Lösung funktioniert nicht für mich. Der toggle-Schaltfläche sollte eine Konstante Größe, nicht zu einem kleinen Prozentsatz - wenn Sie das Fenster schmaler ist, wird es Bildlaufleisten, weil Sie die Pfeil-Zeichen ist breiter als die 4 - % - box. Wenn Sie das Fenster breiter, die 4 - % - Feld ist viel zu groß. Ich könnte dies umgehen, mit verschiedenen Stilen, aber ich bin wirklich auf der Suche für eine Lösung, die funktioniert, ohne zu beheben die Breite, oder auf ein minimum zu beheben die Breite der Knebel und die Haupt-Taste wird der Raum.

    InformationsquelleAutor belens

Schreibe einen Kommentar