web-dev-qa-db-ja.com

btn-xsはbootstrap 4？

私はbootstrap 4に移行しましたが、xsボタンはそれほど小さくないようです！

bootstrap 4-/のボタンの ドキュメントを見る 余分な小さなボタンのオプションが表示されない？

誰も私のためにこれを確認できますか？

ありがとう！

twitter-bootstraptwitter-bootstrap-4bootstrap-4
39
Dragan

@ rifton007 は、この件に関するGitHubの問題の簡単な修正を投稿しました。これをcssファイルに追加します。

.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

デモ：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}
</style>

<button class="btn btn-primary btn-xs">♡</button>
<button class="btn btn-primary btn-sm">♡</button>
<button class="btn btn-primary">♡</button>
<button class="btn btn-primary btn-lg">♡</button>

ソース

33
aloisdg

はい、ありませんbtn-xs in Bootstrap 4、このクラスを自分で作成する必要があります。scss/mixins/_buttons.scssには、button-sizeというmixinがあります。したがって、SCSSコードでは次のコードを使用します。

.btn-xs {
  // line-height: ensure proper height of button next to extra small input 
  @include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
}
11
Bass Jobsen

独自のxsスタイルと変数を定義する必要があります。これは私に最適で、bootstrap 3 btn-xsサイズに近いものです：

ブートストラップ4アルファ

$btn-padding-x-xs: .38rem !default;
$btn-padding-y-xs: .18rem !default;

.btn-xs {
    @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $btn-border-radius-sm);
}

ブートストラップ4ベータ2

$btn-padding-x-xs:  .20rem !default;
$btn-padding-y-xs:  .12rem !default;
$input-btn-line-height-xs: 1.1 !default;

.btn.btn-xs {
   // line-height: ensure proper height of button next to small input
   @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}
10
squadwuschel

Bass Jobsenが提案したようにこれを追加しました：

.btn-xs
  +button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)

Bootstrap=のデフォルト_variables.scssを使用して、これが結果でした：

btn-xs

お役に立てば幸いです。

2
Jorge Sampayo