85

我刚刚迁移到 bootstrap 4，我的 xs 按钮似乎不再那么小了！

查看bootstrap 4 中按钮的文档，我没有看到额外小按钮的选项？

谁能帮我确认一下？

谢谢！

4

6 回答 6

100

@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">♡&lt;/button>
<button class="btn btn-primary btn-sm">♡&lt;/button>
<button class="btn btn-primary">♡&lt;/button>
<button class="btn btn-primary btn-lg">♡&lt;/button>

资源

编辑：

后来在这个问题上，@deadmann回复说他在旧的 BS3 文档中挖掘了一点，并提取了以下代码：

<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">♡&lt;/button>
<button class="btn btn-primary btn-sm">♡&lt;/button>
<button class="btn btn-primary">♡&lt;/button>
<button class="btn btn-primary btn-lg">♡&lt;/button>

于 2018-06-19T15:24:55.227 回答
14

是的btn-xs，Bootstrap 4 中没有，你必须自己创建这个类。在scss/mixins/_buttons.scss您会发现在您的 SCSS 代码中调用的 mixin button-size，请使用以下代码：

.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);
}
于 2015-11-28T22:51:10.203 回答
12

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

Bootstrap 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);
}
于 2017-01-30T21:43:43.220 回答
4

我按照 Bass Jobsen 的建议添加了这个：

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

使用默认_variables.scss的 Bootstrap，结果如下：

btn-xs

希望它可以帮助你。

于 2016-05-06T00:06:35.937 回答
3

我从旧版本的 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>

于 2020-12-25T06:07:15.547 回答
2

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

于 2020-04-03T14:19:03.380 回答