it-swarm.com.de

Wie erreicht man mit Bootstrap (oder Straight-CSS) einen "mini" select-Stil?

Ich verwende die btn-mini-Klasse von Bootstrap für "Mini" -Schaltflächen und suche nach etwas Analogem, um ein "Mini" -Auswahlelement zu erstellen, bei dem der Auswahlknopf (dh der Teil, auf den Sie klicken, um die Liste der Optionen anzuzeigen, nicht die Liste der Optionen selbst) ) hat die gleiche Größe und den gleichen Stil wie ein Mini-Button. 

Wenn ich die btn-mini-Klasse auf ein select-Element anwende, hat der Schriftstil der select-Schaltfläche dieselbe Größe wie eine Mini-Schaltfläche, die Größe der select-Schaltfläche selbst bleibt jedoch von der Standardgröße unverändert. 

Gibt es eine andere Bootstrap-Klasse, die ich verwenden sollte? Oder eine andere Möglichkeit, dies zu tun?

P.S. Ich arbeite an OS X Chrome, aber ich hoffe natürlich, dass es eine Browser-kompatible Lösung gibt.

32
Ghopper21

HTML

<select class="btn btn-mini">
    <!-- options -->
</select>
<span class="caret"></span>

CSS

select.btn-mini {
    height: auto;
    line-height: 14px;
}

/* this is optional (see below) */
select.btn {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    padding-right: 16px;
}

select.btn-mini + .caret {
    margin-left: -20px;
    margin-top: 9px;
}

Die letzten beiden Regeln sind optional, so dass <select> wie <button> aussieht. Ich habe auch ein Caret hinzugefügt. Siehe diese Geige .

27
Pavlo

Für den Fall, dass alle Benutzer von Bootstrap 3 auf diese alte Frage stoßen, ist hier der BS3-Weg:

<select class="form-control input-lg"></select>
<select class="form-control"></select>
<select class="form-control input-sm"></select>

<input class="form-control input-lg">
<input class="form-control">
<input class="form-control input-sm">

Es gibt jedoch keine Eingabe-xs, also müssten Sie das selbst machen, wenn Sie kleiner werden möchten.

.input-xs, select.input-xs {
  height: 20px;
  line-height: 20px;
}
55
Will Stern

Für Bootstrap 4 können Sie zum Festlegen von heightform-control-sm-Klasse mit form-control verwenden.

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

 enter image description here

Und um width einzustellen, müssen wir Spaltenklassen wie .col-sm-*, .col-md-*, .col-lg-* usw. verwenden.

Geben Sie also den Auswahlcode ein:

<div class="row">
  <div class="col-md-3">
    ... select tag code ...
  </div>
</div>

und es wird so aussehen:

 enter image description here

Das letzte Element kann als "mini" select-Element bezeichnet werden.

4
Rajkaran Mishra

Dies ist keine abschließende Antwort, aber ich wollte das, was ich bisher bekommen habe, an alle anderen weitergeben, die daran interessiert sind.

Wie von Jackwanders vorgeschlagen, habe ich eine benutzerdefinierte CSS-Klasse erstellt:

.select-mini {
  font-size: 11px;
  height: 20px;
  width: 100px;
}

Durch diese font-size- und height-Regeln wird das Auswahlfeld mehr oder weniger mit der Größe einer Mini-Schaltfläche identisch, der Text ist jedoch nicht ganz auf dieselbe Weise ausgerichtet (etwas nach oben verschoben). Beachten Sie, dass Sie height nicht line-height verwenden müssen, um eine height-Regel für Auswahlelemente außer Kraft zu setzen, die Bootstrap an anderer Stelle setzt. (Die width-Regel dient nur zum Ändern des Widgets und kann beliebig sein.)

Mein CSS-fu ist nicht gut genug, um den Mini select schnell mit den Mini-Buttons konsistent aussehen zu lassen. Soweit ich sehe, verhält sich select etwas seltsam, wenn es um CSS geht, aber hoffentlich wird dies als Start für andere hilfreich sein . Inzwischen noch offen für bessere Antworten!

2
Ghopper21

Basierend auf btn-xs class habe ich folgendes vorbereitet:

.input-xs{
    height: 20px;
    line-height: 1.5;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
}

Beachten Sie, dass die Breite nicht begrenzt ist!

Bitte überprüfen Sie diese Geige , um sie in Aktion zu sehen.

0
1_bug

Pavlo Antwort ist besser. Wenn jedoch der Mauszeiger über dem Caret-Klick steht, funktioniert das Klicken nicht. In der Caret-Klasse muss nur eines hinzugefügt werden, um das Problem zu beheben:

select.btn-mini + .caret {
    margin-left: -14px;
    margin-top: 19px;
	pointer-events: none;
}

0
EminST