btn-xs不再是bootstrap 4中的有效选项?

qyyhg6bp  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(7)|浏览(256)

我刚刚迁移到bootstrap 4,我的xs按钮似乎不再是额外的小!
看看docs for buttons in bootstrap 4,我没有看到额外的小按钮的选项?
有人能为我证实这一点吗?
谢谢!

9lowa7mx

9lowa7mx1#

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

来源
编辑:
后来,@deadmann回答说,他在旧的BS 3文档中挖掘了一点,并提取了以下代码:

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

llew8vvj2#

是的,Bootstrap 4中没有btn-xs,你必须自己创建这个类。在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);
}
cczfrluj

cczfrluj3#

你需要定义你自己的xs样式和变量,这对我来说最匹配,并且接近bootstrap 3 btn-xs大小:

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);
}
3pvhb19x

3pvhb19x4#

我从旧版本的Bootstrap中提取了CSS。您可以在自定义样式表中使用下面提到的CSS样式。在名为btn-xs的类的帮助下,您可以为按钮使用旧样式。
祝你好运。

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

guicsvcw5#

我按照Bass Jobsen的建议补充了这一点:

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

使用Bootstrap的默认_variables.scss,结果如下:

希望对你有帮助。

cwdobuhd

cwdobuhd6#

在bootstrap 4中不再提供额外的小按钮选项。只有3种尺寸可供选择,大号,普通号,小号。

dy1byipe

dy1byipe7#

在Bootstrap 5中工作

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

相关问题