CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – “水平在任何时候”是什么意思?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
对于超小型设备,新的Bootstrap三个文档 explains the grid behaviour为“始终水平”.这是什么意思?当然,在一个小型设备上,所有列都会垂直堆叠在一起?我在这里失败的是我(缺乏)对网格是什么的理解.

我是从非设计师的角度出发,试图将一些产品迭代到响应式网格中.每行中的列数将根据是否显示奇数或偶数的产品而改变. < - Bootstrap,在动态页面上使用静态内容似乎很简单.例如,我们必须插入空的< div class =“col-xs *”>< / div>使它达到12?

解决方法

什么“水平始终”意味着没有断点,col-xs- *将从浮动变为堆叠.例如: @H_489_8@<div class="col-xs-6"></div> <div class="col-xs-6"></div>

在此示例中,无论您是在手机,平板电脑还是台式机上,总会有两列大小相等的列.对比:

@H_489_8@<div class="col-sm-6"></div> <div class="col-sm-6"></div>

在此示例中,将堆叠列,直到设备的视口为> = 768,此时它将切换到两个大小相等的列.

你可能会问自己的问题是“为什么所有这些变化?”嗯,这些选项给我们的是能够在各种设备上自定义布局,而无需在CSS中弄脏.例如,如果我想在手机上使用两个相等的列,但在平板电脑上需要75/25分割,我会执行以下操作:

@H_489_8@<div class="col-xs-6 col-sm-8"></div> <div class="col-xs-6 col-sm-4"></div>

如果您想要在手机上堆叠,在平板电脑上相同,在桌面上使用75/25,那么请执行以下操作:

@H_489_8@<div class="col-sm-6 col-md-8"></div> <div class="col-sm-6 col-md-4"></div>

因为您没有明确指定手机的网格,所以它将恢复为堆叠.

为了获得稳固的感觉,将一些简单的网格放在一起,然后开始调整浏览器的大小.您应该能够比在文档中更容易地看到它的变化.

编辑

想到另一个可能感兴趣的例子:手机和平板电脑两个相同的列,然后是75/25和桌面.代码:

@H_489_8@<div class="col-xs-6 col-md-8"></div> <div class="col-xs-6 col-md-4"></div>

这实际上是“水平在任何时候”的一个很好的例证.因为我们没有指定col-sm,所以在我们点击桌面断点(设置为> = 992)之前,会继续执行col-xs.

大佬总结

以上是大佬教程为你收集整理的css – “水平在任何时候”是什么意思?全部内容,希望文章能够帮你解决css – “水平在任何时候”是什么意思?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。