layui栅格布局问题
在使用layer.open弹出到窗口中,使用布局一直不起作用。
开始到写法如下, 目的是一行分成左右两块,比例为8:4等分。
<div class="layui-fluid">
<div class="layui-row layui-col-space10">
<div class="layui-col-md8">
<div class="layui-card">
<div class="layui-card-header">
最近更新
<a lay-href="http://www.layui.com/doc/base/changelog.html" class="layui-a-tips">全部更新</a>
</div>
<div class="layui-card-body">body</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">便捷导航</div>
<div class="layui-card-body">
body
</div>
</div>
</div>
</div>
</div>
但是显示出的页面如下,变成2行,显然不是我想要的:

最后调整了layui-col属性,将layui-col-md8,layui-col-md4修改为 layui-col-sm8, layui-col-sm4 , 显示如下,得到了我想要的结果:

官方文档中 layui-col-xxx数字 后的xxx有 xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),4种属性,在实际使用中需要自行调整使用。
layui栅格布局问题的更多相关文章
- 浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
- bootstrap(关于栅格布局)
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
- Bootstrap栅格布局系统的特点
栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...
- CSS:谈谈栅格布局
检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...
- bootstrap笔记-栅格布局
1. .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- bootstrap的栅格布局不支持IE8该如何解决
用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤 方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到 方法二:由于IE8不支 ...
- 【响应式】foundation栅格布局的“尝鲜”与“填坑”
提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...
- grid栅格布局
前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...
随机推荐
- source insight 相对路径新建工程
在创建source insight工程时,最好用“相对路径”,并“将si的工程文件,保存到源码包里”! 这样一来,等以后,将源码包放置于硬盘上其他位置,或分发给其他人,或改了源码包的名称,si工程仍然 ...
- chrome 插件 导出与导入,以apizza SQ为例
一.chrome 插件的导出 1.打开 chrome://extensions/ 2.打开开发者模式 3.复制插件的ID 4.搜索 通常是在:C:\Users\Lee\AppData\Local\Go ...
- Java项目多数据源配置 (转)
由于种种原因,有的时候可能要连接别人的数据库,或者不同的数据库没法自动转换,重构起来数据量又太大了,我们不得不在一个项目中连接多个数据源.从网上找了各种资料,只有这位大神给出的解决方案一下子就成功了. ...
- 利用Regsvr32绕过Applocker的限制策略
Metasploit Metasploit框架有一个特定的有效载荷,可用于通过Regsvr32实用程序实现自动化绕过AppLocker exploit/windows/misc/regsvr32_ap ...
- Android 自定义 View 知识点
根据 Hencoder 提供的知识点,进行学习和总结. 三个要点: 布局 绘制 触摸反馈 绘制 自定义绘制:由自己实现绘制过程 常用绘制方法 onDraw(Canvas canvas) 绘制关键: c ...
- js 动画3 完美框架
js 框架: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ ret ...
- 菜鸟调错(一)——Maven项目部署到Jboss出现:Failed to create a new SAX parser
今天调试的时候遇到一个错误,往Jboss的deploy目录扔war包的时候,报了一个“Failed to create a new SAX parser”的错误.在网上找了找解决方案,一般都说将项目中 ...
- 解决failed to get the required adt version from sdk version
在网上看了很多,选择其中的一个解决方法试了下, 还行. AS 2.3之后不能和Eclipse共用一个SDK,给Eclispe重新配置一个SDK路径
- 每日英语:15 places to find inspiration
If you’re a writer or artist, you understand the power of location when it comes to creativity and f ...
- MyBatis 问题列表
问题表现:The content of elements must consist of well-formed character data or markup 解决办法:1.配置的动态SQL语句里 ...