Bootstrap 3中按钮大小调整的最佳实践

Question

我想知道Boostrap 3中按钮大小调整的最佳做法。

我的代码是：

<a href="" title="" class="btn btn-header btn-block btn-lg hidden-xs">Bonus</a>
<a href="" title="" class="btn btn-header btn-block btn-sm visible-xs">Bonus</a>

我认为如果我复制每一行，这种方法会产生太大的文件大小。所以，也许我可以覆盖媒体查询中的btn-lg类。你怎么看？有没有“官方”的做法？

Answer 1

如果您想消除重复标记，可以使用CSS媒体查询，并相应地缩放按钮大小。

工作演示：http://bootply.com/128288

@media (max-width: 768px) {}    
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}