当窗口大小改变时，我该如何更改Bootstrap网格？

Question

在我的网站上，有一个方框大小不符合我的要求。
<div class=" col-md-12">...</div>
在显示器屏幕上，填充的间距太小了。但在手机屏幕上就没问题了。
<div class=" col-md-10 col-md-offset-1">...</div>
在显示器屏幕上填充的间距很好，但在手机屏幕上太小了。
这是怎么回事？
如何让它在两种情况下都可以正常工作？

- Doron

Answer 1

你有没有阅读过Bootstrap的文档？

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

Bootstrap是为此设计的，但您需要告诉您的类。MD代表中等设备...您还有sm代表手机。因此，如果您想在手机上使用10列，请按以下方式设置类。

...

如果这不能满足您的需求（sm范围介于991像素至768px之间），请使用XS类。

...

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

所以回到你的问题：它们可以组合吗？是的，他们可以。

您可以从1个类到很多个类进行组合，因为Bootstrap将根据屏幕大小选择所需的类。因此，您还可以向其添加类，以指定其在大屏幕（col-lg）到超小屏幕（col-xs）上的行为。我建议您查看Bootstrap网站上带有示例的文档。

祝编写HTML愉快！

- Dorvalla

Answer 2

.col-md-12没有其他类时，在所有视口大小上都是全宽。为了使填充和边距正常工作，您需要在其周围放置一个.row，以便列类的填充通过周围的.row（带有负L和R边距）进行调整，然后在此之外，您需要使用.container或.container-fluid类来防止水平滚动条。

但是，如果这个“大矩形”始终是全宽的，就像.col-md-12一样，您绝对不需要使用任何网格类。如果您希望它包含在.container的最大宽度内，请直接将其放在.container中而不需要周围的网格类，或者您可以将其放在.container-fluid中，以仅获取左侧和右侧的15px（默认填充），或者将其放在空白处（将其留给自己），它将在没有填充/间距的情况下触及您的视口边缘。

如果您不使用任何网格类，您可以使用max-width使您的矩形成为百分比宽度，并放置.center-block类

- Christina