在我的网站中，我有一个尺寸不符合我要求的盒子。
<div class=" col-md-12">...</div>
当窗口是监视器屏幕时，我得到的填充太少了。
在手机屏幕中填充很好。
<div class=" col-md-10 col-md-offset-1">...</div>
在显示器屏幕上填充很好，但在手机屏幕上太小了。
为什么会这样？
我怎样才能让它同时适用于两者？
【问题讨论】：
标签： css twitter-bootstrap resize material-design autoresize
您是否阅读过 Bootstrap 的文档？
http://getbootstrap.com/css/#grid
Bootstrap 就是为此而设计的，但是，你需要告诉你的类它。 MD 代表中型设备……您还有 sm 即电话。因此，如果您想在手机上使用 10 列，请按照以下方式设置您的课程。
<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>
如果这不能让你到达那里（sm 范围在 991 像素到 768 像素之间），请使用 XS 类。
<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>
这会影响分辨率为 767 像素或更低的设备。
所以回到你的问题：它们可以组合吗？ 是的，他们是
您可以制作的组合集可以从 1 个类组成到.. 我不知道有多少，因为引导程序会根据屏幕的大小选择它需要的类。因此，您还可以向它添加类，它应该如何在大屏幕 (col-lg) 到超小屏幕 (col-xs) 上表现。我建议您进一步参考引导网站上的示例文档。
HTML 快乐！
【讨论】：
.col-md-12 没有其他类在所有视口大小下都是全宽的。要使填充和边距正常工作，您需要在其周围使用 .row 以便列类的填充由周围的 .row 调整（具有负 L 和 R 边距），然后除此之外，您还需要.container 或 .container-fluid 类来防止水平滚动条。
但是，如果这个“大矩形”一直是全角的，就像.col-md-12 一样，你绝对不需要使用任何网格类。如果您希望它包含在 .container 的最大宽度内，请将其直接放在 .container 不 周围的网格类中，或者您可以将其放在 .container-fluid 中以获取左右 15 像素（默认填充）或将其放在任何内容中（自行保留），它将在没有任何填充/排水沟的情况下撞击视口的边缘。
如果您不使用任何网格类，您可以将矩形设置为具有最大宽度的百分比宽度（如果您愿意的话）并将类放在 .center-block
【讨论】：