twitter-bootstrap - btn-xs 不再是 Bootstrap 4 中的有效选项？

Question

我刚刚迁移到 Bootstrap 4，我的 xs 按钮似乎不再特别小!

查看docs for buttons in bootstrap 4我没有看到额外小按钮的选项？

有人可以帮我确认一下吗？

谢谢!

Answer 1

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

source

编辑:

稍后的问题，@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">♡</button>
<button class="btn btn-primary btn-sm">♡</button>
<button class="btn btn-primary">♡</button>
<button class="btn btn-primary btn-lg">♡</button>