Wie das zu erreichen ist ein "mini" - wählen Sie-Stil mit Bootstrap (oder gerade CSS)?

Ich bin mit Bootstrap ist btn-mini Klasse für "mini" - Tasten und bin auf der Suche nach etwas analoges zu einem "mini" select-element, wo Sie die select-Taste (also der Teil, den Sie klicken, um die Liste der Optionen, die nicht in der Liste der Optionen selbst) ist die gleiche Größe und Form wie eine mini-Taste.

Wenn ich die btn-mini Klasse zu einem select-element, wird der Schriftschnitt der select-Taste ist die gleiche Größe wie ein mini-Taste, aber die Größe der select-Taste selbst ist unverändert aus dem Standard-Größe.

Ist es eine andere Bootstrap-Klasse, die ich verwenden sollte? Oder einen anderen Weg, es zu tun?

P. S. ich arbeite unter OS X Chrome, aber hoffe natürlich es ist ein cross-browser-kompatible Lösung.

InformationsquelleAutor der Frage Ghopper21 | 2012-08-27

  1. 27

    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;
}

    Den letzten 2 Regeln sind optional, es wird <select> Aussehen <button>außerdem habe ich einen Cursor an. Sehen Sie diese fiddle.

    InformationsquelleAutor der Antwort Pavlo

  2. 53

    Nur im Falle eines Bootstrap-3-Nutzer kommen über diese alte Frage, hier ist die 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">

    Gibt es keine input-xs, obwohl, so dass Sie würde haben zu machen, selbst wenn Sie wollte, kleiner.

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

    InformationsquelleAutor der Antwort Will Stern

  3. 4

    Für Bootstrap-4um Höhe wir können form-control-sm Klasse mit form-control.

    <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>

    Wie das zu erreichen ist ein

    Und Breite diese, die wir haben, um die Verwendung der grid-Spalte Klassen wie .col-sm-*.col-md-*.col-lg-* usw.

    So legen Sie die select-code:

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

    und es wird so Aussehen:

    Wie das zu erreichen ist ein

    Können Sie die letzten "mini" select-element.

    InformationsquelleAutor der Antwort Raj Mishra

  4. 2

    Dies ist nicht eine endgültige Antwort, aber ich wollte zu teilen, was ich bisher bekommen haben, für alle anderen neugierig, dies zu tun.

    Vorgeschlagen von jackwanders, ich habe Voraus gegangen, und erstellt eine benutzerdefinierte CSS-Klasse:

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

    Diese font-size und height Regeln mehr oder weniger erhalten Sie die select-box die gleiche Größe wie ein mini-button, aber der text ist nicht ganz ausgerichtet auf die gleiche Weise (es ist leicht verschoben). Hinweis: Sie müssen verwenden height nicht line-height zu überschreiben height Regel wählen Sie Elemente, die Bootstrap-sets an anderer Stelle. (Die width Regel einfach zu ändern, die widgets und können, was Sie wollen.)

    Meine CSS-fu ist nicht gut genug, um schnell die mini-select-look voll im Einklang mit den mini-Tasten, und von dem, was ich sehen kann, wählen Sie die benehmen sich seltsam, wenn es um CSS sowieso, aber hoffentlich hilfreich als Einstieg zu anderen. Derweil noch offen, die besseren Antworten!

    InformationsquelleAutor der Antwort Ghopper21

  5. 0

    Basierend auf btn-xs Klasse, die ich vorbereitet habe:

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

    Beachten Sie, dass die Breite ist nicht begrenzt!

    Bitte überprüfen Sie diese Geigeum ihn in Aktion zu sehen.

    InformationsquelleAutor der Antwort 1_bug

Schreibe einen Kommentar