在bootstrap中响应性地调整按钮大小

Question

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

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

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

我可以通过Jquery完成这个,但是想知道bootstrap是否已经具有此功能？

Answer 1

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

@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响应按钮大小

Answer 2

扩展 ZimSystem 答案..

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}