Btn-xs 在引导程序4中不再是有效的选项？

Yes there is no btn-xs in Bootstrap 4, you will have to create this class your self. In the scss/mixins/_buttons.scss you will find the mixin called button-size so in you SCSS code use the following code:

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

I added this as Bass Jobsen suggested:

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

Using the default _variables.scss of Bootstrap and this was the result:

Hope it helps you.

you need to define your own xs style and variable this matches best for me and comes close to the bootstrap 3 btn-xs size:

Bootstrap 4 Alpha

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

Bootstrap 4 Beta 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);
}

@rifton007 posted a quick fix in the GitHub issue on this subject. Add this in your css file:

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

Demo:

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

source

Edit:

later on the issue, @deadmann replied that he dig up a little in old BS3 documentation and extract the following code:

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


<style>
.btn-group-xs > .btn, .btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
</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>

There is no longer available the option of extra small button in bootstrap 4. Only 3 sizes are available, large, normal, small.

I have extracted CSS from the Old Version of Bootstrap. You can use the below mentioned CSS style in your custom stylesheet. With the help of class named btn-xs, you can use the old style for your button.

Good Luck.

button
{
margin-top: 10px;
margin-left: 10px;
}
.btn-xs
{
padding: 1px 5px !important;
font-size: 12px !important;
line-height: 1.5 !important;
border-radius: 3px !important;
}

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css">


<button class="btn btn-primary btn-xs">This is Small Button</button>