35

「ミニ」ボタンにBootstrapのbtn-miniクラスを使用しており、「ミニ」選択要素を作成するために類似したものを探しています。選択ボタン（つまり、オプションのリストではなく、オプションのリストを表示するためにクリックする部分）自体）ミニボタンと同じサイズとスタイルです。

クラスを選択要素に適用するbtn-miniと、選択ボタンのフォント スタイルはミニ ボタンと同じサイズになりますが、選択ボタン自体のサイズは既定のサイズから変更されません。

使用すべき別の Bootstrap クラスはありますか? またはそれを行う別の方法はありますか？

PS私はOS X Chromeに取り組んでいますが、当然、クロスブラウザ互換のソリューションがあることを願っています.

4

6 に答える 6

30

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

最後の 2 つのルールはオプションです。次の<select>よう<button>になります。キャレットも追加しました。このフィドルを参照してください。

于 2012-08-28T12:50:24.607 に答える
12

Bootstrap 4では、高さを設定するためにform-control-smclass withを使用できます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>

ここに画像の説明を入力

これらの幅を設定するには.col-sm-*、.col-md-*、.col-lg-*、 などのグリッド列クラスを使用する必要があります。

したがって、選択コードを次のように入力します。

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

次のようになります。

ここに画像の説明を入力

最後の要素を「ミニ」選択要素と呼ぶことができます。

于 2017-08-17T12:47:39.350 に答える
2

これは最終的な答えではありませんが、これを行うことに興味がある人のために、これまでに得たものを共有したいと思いました。

jackwandersが示唆しているように、私は先に進んでカスタムCSSクラスを作成しました。

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

これfont-sizeとheightルールにより、選択ボックスはミニボタンとほぼ同じサイズになりますが、テキストは同じように完全に整列されていません（わずかに上にシフトされています）。Bootstrapが他の場所で設定するselect要素のルールをオーバーライドしheightないように使用する必要があることに注意してください。（ルールはウィジェットを変更することだけであり、好きなようにすることができます。）line-heightheightwidth

私のCSS-fuは、ミニセレクトをミニボタンと完全に一致させるのに十分ではありません。CSSに関しては、セレクトが奇妙な動作をすることがわかりますが、これが他の人の出発点として役立つことを願っています。 。その間、まだより良い答えを開いています！

于 2012-08-28T12:42:04.680 に答える