html – Bootstrap-3网格布局和固定大小的广告横幅

html – Bootstrap-3网格布局和固定大小的广告横幅,第1张

概述在阅读有关新网格引导程序系统时,我问自己,广告横幅如何适应这种网格系统? 我知道自适应广告(广告意义等),但我仍然不明白这些概念如何正确应用于摩天大楼广告横幅. 这是我正在谈论的模拟: 有一个横向广告很好,但bootstrap如何帮助我创建这样的布局? 使用网格助手隐藏小型设备的摩天大楼是没有问题的,但我是对的,我仍然需要弄乱浮动:左;和这种情况的clearfix? 即使摩天大楼响应并根据某些列宽 在阅读有关新网格引导程序系统时,我问自己,广告横幅如何适应这种网格系统?

我知道自适应广告(广告意义等),但我仍然不明白这些概念如何正确应用于摩天大楼广告横幅.

这是我正在谈论的模拟:

有一个横向广告很好,但bootstrap如何帮助我创建这样的布局?
使用网格助手隐藏小型设备的摩天大楼是没有问题的,但我是对的,我仍然需要弄乱浮动:左;和这种情况的clearfix?

即使摩天大楼响应并根据某些列宽调整自身大小,例如col-md-2等,它仍然需要某种“行跨度”才能跨越任意行.

编辑:只是为了说清楚:我不是要求一个完整的标记全部装扮,只是为了洞察这个概念在响应时间是否过时或者这仍然是浮动的东西:正确或位置:相对等.

解决方法 bootstrap不具有固定宽度列.它是围绕百分比列宽设计的.

但是,您可以使用跟随bootstrap使用它们的创建媒体查询.对于“平板电脑”大小的设备,bootstrap将整个容器设置为固定宽度768px,如下所示.

@media (min-wIDth: 768px) {    .container {        wIDth:750px    }}

您可以利用这些知识创建两个类,将布局分为两列.一个用于内容,一个用于广告.

@media (min-wIDth: 768px) {  .col-left-wIDth{    wIDth: 625px;  }  .col-right-wIDth{    wIDth: 120px;  }}

这允许您具有120px的固定右列宽度.但随着屏幕大小的变化,您可以将“左”列宽重新定义为

Container WIDth - 120 - padding.

在这种情况下,左列将设置为625px.

我在http://jsbin.com/suceji/3/有一份工作样本

总结

以上是内存溢出为你收集整理的html – Bootstrap-3网格布局和固定大小的广告横幅全部内容,希望文章能够帮你解决html – Bootstrap-3网格布局和固定大小的广告横幅所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1055695.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存