1

这是一个评论请求，看看我是否对我如何使用 Bootstrap（在 KO 的帮助下）有所了解。

我对 Knockout 有点陌生（但很喜欢它），而且对 BootStrap 非常陌生（使用 v3）。我现在发现我已经使用 BootStrap 3 一个星期左右，我对它有了一个不错的理解。我非常喜欢如何为 col 宽度（在不同的屏幕尺寸）放置多个类，并且媒体查询会处理它。不幸的是，我相信按钮/输入大小需要相同的东西。

我试图让 BootStrap 尽可能地保持原样（没有很多 css 覆盖/更改），以便相同的技术适用于我未来的所有项目。

作为其中的一部分，我遇到了需要根据屏幕宽度调整按钮大小的问题。我能想到的最好的方法是一个淘汰绑定，它查看屏幕大小并调整 CSS 类。

我正在寻找评论或替代方案。我知道 visible-* 和 hidden-* ，但觉得这会使我的标记膨胀很多（RFC？）。

我有一个我正在谈论的示例，代码快速而粗略，只是为了证明我的观点。

http://cssdeck.com/labs/full/bp4twzfb

干杯

4

1 回答 1

2

您不需要使用任何 javascript 来修改 css 以获取屏幕宽度等内容。您可以只使用引导程序本身使用的@media 规则。

这是您可以执行的操作的简单示例：

@media(max-width:990px){
  .btn{
    padding: 0 5px;  
  }
}

当屏幕等于或小于 990 像素时，这将使所有按钮缩小（由于填充较少）。

相同的原则使它们在宽屏（1200px+）上变得非常大（更多的填充和更大的字体大小）

@media(min-width:1200px){
  .btn{
    font-size: 24px;
    padding: 20px 30px;  
  }
}

只需在必要的宽度上进行任何您想要的更改，它应该可以工作。

由于您使用的是香草引导程序，因此这些是您要使用的断点

@media(min-width:768px) /* for small screens like tablets */

@media(min-width:992px) /* for large screens like laptops and large tablets */

@media(min-width:1200px) /* for extra large screens like desktop monitors */

如果您想对移动设备进行任何更改，只需在这些 @media 块之外和之前编写您的 css。Bootstrap 以移动优先的方式工作，这意味着它从移动样式开始，然后逐层构建，并针对每个更大的屏幕尺寸进行修改。

希望有帮助。

于 2013-09-18T14:28:01.620 回答