我有一个引导类的问题,我有一个 .row 类的 div,在里面说 div 我还有两个类 .col-10 和 col-2,当应用程序在 Desktop 中执行时它看起来很好,但是通过时在 iPad 的分辨率下,div 被覆盖。
我想要做的是,当屏幕分辨率为 768px(width) 时, .col-10 类更改为 .col-12 以便它填满屏幕而另一个 div 下降。
我试图做一个 JavaScript 函数,但它没有给我错误或任何东西,也没有做出我需要的改变。
function cambio(){
var clase = document.getElementById("resize");
if (window.screen.width < 768){
clase.className = "col-12";
}else{
clase.className = "col-10";
}
}
关于您的问题,您误会了引导网格系统,对于您想要做的事情,javascript不是必需的。事实证明,对于你想要的,你只需要使用
col-*
.更详细一点,引导断点定义为
col-sm-* , col-md-* , col-lg-* , col-xl-*
Grid Bootstrap。按照这个顺序(col-*
从最低到最高,除非它没有断点,这就是你的代码不起作用的原因)那么如何根据设备使其具有一定的尺寸呢?
答案很简单,您只需使用其中的类
div
即可使其工作,例如:在那个snipet中我告诉你,根据设备它占据一定比例的行,如果你仔细观察
col-sm-4
这个类col-sm
用于手机等小型设备,col-md-*
它通常用于平板电脑,col-lg-*
它通常用于电脑屏幕和col-xl-*
分辨率高于 los 的屏幕1140px
,因此您应该只使用这些类,屏幕会自行适应。它管理的网格总数为 1 到 12,每个数字都有一个百分比,即 12 代表
row
.总结一下,我
sm, md, lg, xl
根据我希望它在每个设备上的行为方式来使用,我使用一个从 1 到 12 的数字来说明我使用的百分比。我希望这个解释对你有所帮助。问候。
利用:
例如:
引导框架的优点是它可以处理网格系统。它支持您,以便您的网站使用响应式设计。这包括适应屏幕的大小,就像你正在寻找的那样。
这就是您要对代码执行的操作。
专注于研究网格系统和齐头并进的引导显示前缀。
使用 CSS 媒体查询。
按大小最小分组。或最大。作为适当的。
在这样做之前,请检查 Bootstrap 用于计算限制的标准化。