Question

我正在开发一个必须与多种设备兼容的网站，所以我选择使用Bootstrap。我的问题是，虽然我有一个很好的响应网格布局，但我没有看到一个开箱即用的解决方案，使我的网站的其他可视部分响应。我的意思是例如字体大小，表单字段大小，按钮大小等。

我想要的是为桌面提供正常的按钮大小，为移动设备提供大按钮大小（.btn-lg类）。与表单输入类似。对于这种响应方式，是否有一个很好的全球级解决方案？

感谢答案。

编辑：我想尽可能多地重用现有的引导类，只需要添加最少的媒体查询或其他代码。我在基于分辨率的元素上寻找类似“条件类”的东西，如下所示：如果有“sm”或更小的屏幕，请将“btn-lg”添加到“btn”-s。如果有“md”或更大，不要添加任何东西，只需使用纯“btn”。与表单输入类似的东西。

当然，使用简单的媒体查询，字体大小和填充更简单。我的问题主要是表单字段和按钮，正如我在更正后的标题中所述。

我想避免复制和复制更复杂的（如按钮和表单字段）Bootstrap CSS代码到我的CSS中

Answer 1

使用％而不是px。

或在您的css中使用媒体查询

Answer 2

他们在某种程度上有所回应。要添加此级别的响应，您必须编写自己的媒体查询。

这很容易。如果你使用SASS或更少，它会更容易。

请参阅the variables file第260行。这是一段摘录。

@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

电话示例：

@media (max-width: $screen-xs) {
  // Change h1 size
  h1 {
    font-size: 20px;
  }

  // Change .btn font size.
  .btn {
    font-size: 10px;
   }
}

如果您没有使用Sass或Less，只需将变量$screen-xs与您想要的值交换 - 例如480px。

有没有办法使表单字段和按钮字体和高度响应？

2 个答案: