在引导程序中响应地调整按钮大小 [英] resize buttons responsively in bootstrap

问题描述

我正在使用引导程序，并且 CSS 具有响应性，因此它可以在较小的设备上很好地缩小.但是，当视口较小时(例如在移动设备上)，我也希望按钮缩小.

I'm using bootstrap, and the CSS is responsive, so it scales down nicely on smaller devices. However, I would like buttons to shrink too when the viewport is smaller (eg. on mobile).

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

基本上在较小的设备上，类 btn-xs 应该添加到所有按钮中.

Basically on smaller devices, the class btn-xs should be added to all buttons.

我可能可以通过 Jquery 完成此操作，但想知道 bootstrap 是否已经具有此功能?

I can probably accomplish this via Jquery, but was wondering if bootstrap already had this functionality?

推荐答案

您可以使用 CSS @media 查询来相应地缩放按钮..

You could use CSS @media queries to scale the buttons accordingly..

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

演示:http://bootply.com/93706

Bootstrap 4 更新:
Bootstrap 4 响应式按钮大小

这篇关于在引导程序中响应地调整按钮大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！