23

私はブートストラップを使用しており、CSS はレスポンシブなので、小さなデバイスでもうまくスケールダウンします。ただし、ビューポートが小さい場合 (モバイルなど) にもボタンを縮小したいと考えています。

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

基本的に小型のデバイスでは、クラス btn-xs をすべてのボタンに追加する必要があります。

おそらくJqueryを介してこれを達成できますが、ブートストラップにすでにこの機能があるかどうか疑問に思っていましたか?

4

3 に答える 3

38

CSS @media クエリを使用して、それに応じてボタンをスケーリングできます..

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

デモ: http://bootply.com/93706

Bootstrap 4 の更新:
Bootstrap 4 のレスポンシブ ボタン サイズ

于 2013-11-12T18:55:11.380 に答える
5

ZimSystemの回答を展開しています.. 

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}
于 2016-09-17T20:43:06.810 に答える
3

別の選択肢を追加したかっただけです。Bootstrap の LESS を使用している場合は、ミックスインも使用できます。

Bootstrap の LESS フォルダー( bootstrap > less > mixins)の中を見ると、buttons.lessファイルが表示されます。それを開くと、ミックスインが見つかります.button-size()。

ミックスインは次のとおりです。

.button-size(
    vertical padding;
    horizontal padding;
    font size;
    line height;
    border-radius
);

ボタンを動的に作成する方法は次のとおりです。

特定のパラメーターを渡す必要があります。1つ欠けるとブレーキがかかります

.button-size(10px; 10px; 1em; 1.5em; 0);

既存の Bootstrap LESS 変数を使用した例を次に示します。

    .btn {
        @media (min-width: @screen-sm-min) {
            .button-size(
                @padding-small-vertical;
                @padding-small-horizontal;
                @font-size-small;
                @line-height-base;
                @border-radius-small
            );
        }
        @media (min-width: @screen-md-min) {
            .button-size(
                @padding-large-vertical;
                @padding-large-horizontal;
                @font-size-large;
                @line-height-base;
                @border-radius-large
            );
        }
    }
于 2016-12-08T19:02:15.613 に答える