web-dev-qa-db-ja.com

Bootstrapでラベルサイズを設定する方法

ラベルサイズを画面サイズと同じに設定したいと思います。

f.e.大画面の大きなラベルの場合、小画面の小さなラベルの場合。

twitter-bootstraplabelsize
22
Spontan23

現在のバージョンのBootstrap Bootstrap 3では、ラベルのスタイルごとに別々のクラスはありません。

http://getbootstrap.com/components/

ただし、bootstrapクラスをそのようにカスタマイズできます。あなたのcssファイル

.lb-sm {
  font-size: 12px;
}

.lb-md {
  font-size: 16px;
}

.lb-lg {
  font-size: 20px;
}

または、ヘッダータグを使用してサイズを変更できます。たとえば、ここに中サイズのラベルと小サイズのラベルがあります

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Example heading <span class="label label-default">New</span></h3>
<h6>Example heading <span class="label label-default">New</span></h6>

将来のBootstrapバージョンでラベルのサイズクラスを追加する可能性があります。

18
Richard Hamilton

画面サイズに基づいてBootstrapラベル（または実際に何か）のサイズを調整するには、2つのことを行う必要があります。

  • ディスプレイサイズの範囲ごとにメディアクエリを使用して、CSSを調整します。
  • Bootstrapによって設定されたCSSサイズ変更をオーバーライドします。これを行うには、CSSルールをブートストラップよりも具体的にします。デフォルトでは、Bootstrapは.label { font-size: 75% }を設定します。したがって、CSSルールに追加のセレクタがあると、より具体的になります。

Bootstrapのデフォルトの4サイズを使用して、求めていることを達成するためのCSSリストの例を以下に示します。

@media (max-width: 767) {
    /* your custom css class on a parent will increase specificity */
    /* so this rule will override Bootstrap's font size setting */
    .autosized .label { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .autosized .label { font-size: 16px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .autosized .label { font-size: 18px; }
}

@media (min-width: 1200px) {
    .autosized .label { font-size: 20px; }
}

HTMLでの使用方法は次のとおりです。

<!-- any ancestor could be set to autosized -->
<div class="autosized">
    ...
        ...
            <span class="label label-primary">Label 1</span>
</div>
5
Kasey Speakman