css - Bootstrap3 移动设备按钮大小与屏幕按钮大小不同

Question

BootStrap3 是否可以让按钮在移动设备上为 btn-block 而在非移动设备上为 btn？如果可以的话，怎么办，谢谢。

Answer 1

您可以使用 Bootstrap 3 的内置 responsive utility ，而不是像其他答案所建议的那样编写自定义样式，并且维护起来也很麻烦。类。

首先，定义什么是“移动”。就我个人而言，移动设备是一种不好的分组方式，因为有些手机具有高密度显示屏，屏幕尺寸可以达到数千像素。这就是 Bootstrap 将断点称为小、中、大的断点，而不再是移动设备、平板电脑和桌面设备。

一旦定义了要定位的断点，您就可以执行如下操作:

<button type="button" class="btn btn-primary visible-xs-block visible-sm-block">Button Text</button>

需要注意的类是.visible-xs-block和.visible-sm-block。这些将使按钮在“xs”和“sm”断点处成为 block 级。