程序员经验分享-hwhale

Zurb Foundation 5：网格列堆叠

2024-04-08

我是基础新手，我只知道如何使用网格的基本概念。

I have these 3 columns that need to be stacked (see "mobile" image) when viewed on mobile/small screens. mobile screen

在较大的屏幕上，它应该看起来像这样：

这是我当前的代码。这不完全是我想要的，我开始感到困惑。

<div class="row">
    <div class="large-12" style="background-color:#bdc3c7;">
      <div class="medium-4 medium-push-8 columns" style="background-color: #1abc9c; border: 1px solid #2c3e50;">
        <p>TOP ROW</p>
      </div>

      <div class="medium-8 medium-pull-4 columns" style="background-color: #e74c3c; border: 1px solid #2c3e50; height: 250px;">
        <p>MIDDLE ROW</p>
      </div>

      <div class="medium-4 columns" style="background-color: #9b59b6; border: 1px solid #2c3e50;">
        <p>BOTTOM</p>
      </div>
    </div>
</div>

该网格系统适用于大屏幕和小屏幕

   <div class="row">
     <div class="small-12 large-8 columns"></div>
     <div class="small-12 large-4 columns"></div>
     <div class="small-12 large-4 columns"></div>
   </div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

grid

zurbfoundation

zurbfoundation5

Zurb Foundation 5：网格列堆叠 的相关文章

随机推荐

  • IBOutlet 应该是 ivars 还是属性？

    尽管我确信它们存在 但我很难找到或确定在 ViewController 中声明出口的官方最佳实践 据我所知 有 3 个选项 仅伊瓦尔 仅限财产 由 ivar 支持的财产 当前 当我尝试通过从 IB 拖入 ViewController 来自动

  • 重新初始化 JQuery 有 XPage 部分刷新更新 DOM

    我有一个来自核心控件的选项卡式面板 里面是一个

  • Python FastAPI：返回的 gif 图像没有动画

    下面是我的 Python FastAPI 路由和 HTML 页面 Python app get status code 200 async def upload file file UploadFile File error img Ima

  • HTML5 / JavaScript：打开文本文件，加载到文本区域/将文本区域内容保存到文本文件

    我想在浏览器中做两件事 将文本文件加载到文本区域 必须通过对话框选择 将文本区域的内容保存到文本文件中 必须再次通过对话框选择 加载视频文件并获取文件路径以将其与视频播放器一起使用 1 http www longtailvideo com

  • Rails 2：当 id 1 不存在时，Model.find(1) 给出 ActiveRecord 错误

    我正在使用 Rails 2 3 5 如果我给出Model find 1 如果 1 不在数据库中 则返回 ActiveRecord 错误 是否应该回归nil正如以下情况Model find by column 这是预期的行为 我认为 Davi

  • 使用 JSON 字符串解析 URL 时捕获 IllegalArgumentException

    我需要使用 JSON 数据制定一个 url 如下所示 http someurl com passfail parameter http someurl com passfail parameter data1 123456789 data2

  • 将EhCache磁盘存储内容加载到内存中

    正如中所述EhCache文档 http ehcache org documentation get started storage options 在实践中 这意味着持久内存缓存将启动 其所有元素都在磁盘上 因此 Ehcache 设计不会在

  • 如何获得最大可能的精度？ （Python - 十进制）

    我正在使用Decimal https docs python org 2 library decimal html用于需要精度的操作的类 我想使用 最大可能 的精度 我的意思是 程序运行的系统可以处理的精确度 要设置一定的精度很简单 imp

  • 在 Linq to Sql 中调用 InsertOnSubmit 时出现 NullReferenceException

    我尝试使用 LINQ to SQL 将新对象插入到数据库中 但当我在下面的代码片段中调用 InsertOnSubmit 时 出现 NullReferenceException 我传入一个名为 FileUploadAudit 的派生类 并设置

  • 移动 .git 目录

    我有一个在项目学习曲线早期创建的存储库 随着我了解更多 我意识到这会产生问题 因为我想要跟踪的一些文件在编译的源代码中并不需要 我想做的是创建一个新的 项目 父目录 将现有的源目录移动到该父目录中 并将不需要编译的文件迁移到该父目录中 用

  • 码头服务器配置

    我使用 Jetty 9 但配置有一些问题 我简单的 REST 效果很好 但是当我尝试向所有请求和错误处理程序添加新标头时 问题就开始了 我能够处理标头的唯一方法是将以下代码添加到每个响应中 return Response ok murals

  • 使用Python正确解析PDF段落

    我正在创建一个 Python 脚本 该脚本应该从系统加载一堆 PDF 文件 进行一些数据分析并输出结果 数据分析的本质是 我必须按段落解析 PDF 并且对于每个段落 我必须迭代每个短语 检查是否满足某些条件 我目前正在使用 Tika 进行解

  • 调用对象的多个方法？

    我尝试在单个对象上调用多个函数 但我认为我的语法失败了 你能纠正我吗 objMetaDaten gt setStrTitle test gt setStrBeschreibung test gt setStrUeberschrift tes

  • 如何删除 csv 文件中的整行并将更改保存在同一文件上？

    我是 python 新手 尝试修改 csv 文件 以便我能够根据给定列表删除具有特定字段的特定行 在我当前的代码中 我得到了我想要删除的行 但我无法删除它并将更改保存在同一文件上 替换 import os sys glob import t

  • Laravel 5.3 约束渴望加载不起作用

    我有两个型号User and Profile处于一对一的关系中 我想检索所有用户所在位置profile status TRUE使用以下代码 users User with profile gt function query query gt

  • MATLAB 版本 7 中的 pdist2 等效项

    我需要在matlab中计算两个矩阵之间的欧几里德距离 目前我正在使用 bsxfun 并计算距离 如下所示 我附上代码片段 for i 1 4754 test data fea test i d sqrt sum bsxfun minus t

  • Git RPC 失败；结果=22，HTTP 代码=400

    我在 StackOverflow 上阅读过 发现了与我类似的情况 但没有一个足够接近让我弄清楚下一步应该做什么 我正在尝试提取构建我正在开发的项目 git clone 所需的库的新副本 我发出以下命令 启用 GIT CURL VERBOSE

  • 必要时无法加载 Opencv 库

    我尝试在使用 OpenCV 的必要项目中使用相机 我在 pro 文件中有这个 INCLUDEPATH C OpenCV 2 3 1 android bin OpenCV 2 3 1 include C OpenCV 2 3 1 androi

  • 如何在 jQuery 中触发两个元素的 mouseout 事件？

    假设我有两个独立的 div A 和 B 它们在一个角处重叠 A B 我想在鼠标离开时触发一个事件bothA和B 我试过这个 a b mouseleave function 但如果鼠标离开任一节点 则会触发该事件 我希望一旦鼠标不在任何一个节

  • Zurb Foundation 5：网格列堆叠

    我是基础新手 我只知道如何使用网格的基本概念 I have these 3 columns that need to be stacked see mobile image when viewed on mobile small scree

热门标签