css - 如何在窗口调整大小时更改 Bootstrap 网格？

Question

在我的网站上，我有一个大小不符合我要求的盒子。

<div class=" col-md-12">...</div>
当窗口是监视器屏幕时，我得到的填充比我想要的少。
在电话屏幕中填充很好。

<div class=" col-md-10 col-md-offset-1">...</div>
显示器屏幕上的填充很好，但手机屏幕上的填充太小了。
为什么会这样？

我怎样才能让它同时适用于两者？

Answer 1

您甚至阅读过 Bootstrap 的文档吗？

http://getbootstrap.com/css/#grid

Bootstrap 就是为此而设计的，但是，您需要告诉您的类它。 MD 代表中型设备...您还有 sm，即电话。因此，如果您想要在手机上使用 10 列，请按照以下方式制作您的类(class)。

<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>

如果这不能让您到达那里(sm 范围在 991 像素到 768 像素之间)，请使用 XS类(class)。

<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>

这会影响分辨率为 767 像素或更小的设备。

回到您的问题:它们可以组合吗？ 是的，他们是

你可以制作的组合集可以从 1 类组成......我不知道有多少，因为 bootstrap 会根据屏幕的大小选择它需要的类。因此，您还可以向它添加类，它在大屏幕 (col-lg) 到超小屏幕 (col-xs) 上应该如何表现。我建议您进一步引用 bootstrap 网站上的示例文档。

祝您使用 HTML 愉快!