Bootstrap 4 响应式按钮大小

Posted 2023-03-06

【中文标题】Bootstrap 4 响应式按钮大小

【英文标题】：Bootstrap 4 responsive button size

【发布时间】：2017-12-03 07:47:08

【问题描述】：

Bootstrap 4 中有没有办法在 media-breakpoint-xs 中添加类“btn-sm”（小按钮）？

除了在 xs 屏幕中我希望它们自动切换到 btn-sm 之外，我希望按钮为默认大小。

【问题讨论】：

将类添加到元素并在媒体查询中应用样式。

该类是引导程序默认的，通过将类添加到代码中的元素，无论当前断点如何，按钮都会获得这些样式。

How to create responsive buttons in bootstrap3?的可能重复

@user1394625 这就是标志状态为Possible 的原因。不要以为我只是因为我将您的问题标记为可能的重复而否决了您的问题。

【参考方案1】：

如果你想让一个按钮响应，你需要让它的文本响应。

您可以使用 vw（视口宽度）作为字体大小：

@media (max-width: 576px) 
  .responsive-content 
    font-size: 6vw;
  

<button type="button" class="responsive-content btn btn-primary">
  responsive button
</button>

现在您可以调整屏幕大小以查看效果。

【参考方案2】：

在 Bootstrap 4 中，这可以单独使用实用程序类来实现。

<a href="#" class="btn btn-primary d-flex justify-content-center d-md-table mx-auto">Book a demo</a>

【讨论】：

这正是我想要的，谢谢 Man :)

【参考方案3】：

使用 media-breakpoint-between 混合分配 .btn .btn-sm 大小...

/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm)
  .btn 
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  

https://www.codeply.com/go/FoEUO7XCDU

---

更新 - Bootstrap 4.1

这个button-size mixin 已略微更改为：

@include media-breakpoint-between(xs,sm)
  .btn 
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  

【讨论】：

就是这样！感谢您抽出宝贵时间阅读问题

@Mark 您可以将其添加到项目中的任何 .scss 文件中，但您可能还必须导入 bootstrap-grid.scss 和 _buttons.scss 以便它知道什么是 'xs'、'sm'、 '$btn-padding-y-sm' （和其他变量）的意思。如：@import "~bootstrap/scss/bootstrap-grid.scss"; @import "~bootstrap/scss/mixins/_buttons.scss";所有这些内容可能会因您设置 ng2 项目的方式而异