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开发者来说,网页布局一直是个比较 ...
随机推荐
- [转]使用spring中的@Transactional注解时,可能需要注意的地方
前情提要 在编写业务层方法时,会遇到很多需要事务提交的操作,spring框架为我们提供很方便的做法,就是在需要事务提交的方法上添加@Transactional注解,比起我们自己开启事务.提交以及控制回 ...
- Appium 脚本代码中启动appium server
import io.appium.java_client.android.AndroidDriver; import io.appium.java_client.service.local.Appiu ...
- 【转载】Spring @Async 源码解读。
由于工作中经常需要使用到异步操作,一直在使用@Async, 今天抽空学习了一下它的执行原理,刚好看到一篇写的很棒的文章,这里转载过来做个记录,感谢原作者的无私奉献. 原文章链接地址:https://w ...
- unity, unity默认的Arial字体在编译出的h5版本中不显示
unity默认的Arial字体在编译出的h5版本中不显示.改用自己的字体可显示.
- php分享三十:php版本选择
思考: cgi是怎么运行的?(是多线程?多进程?单线程?单进程?) fastcgi运行原理? apache运行php的原理? (是多进程还是多线程?) nginx是怎么运行php的? 什么是安全模式和 ...
- Java数据结构和算法(六):前缀、中缀、后缀表达式
前面我们介绍了三种数据结构,第一种数组主要用作数据存储,但是后面的两种栈和队列我们说主要作为程序功能实现的辅助工具,其中在介绍栈时我们知道栈可以用来做单词逆序,匹配关键字符等等,那它还有别的什么功能吗 ...
- 解决 SQL Server 所有帐号无 sysadmin 权限,且未启用 SQL Server 身份验证,sa 帐号也未启用的问题
解决 未启用 SQL Server 身份验证 的问题: 1. 运行 regedit,进入注册表编辑器 2. 打开:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Micro ...
- [LintCode] Subarray Sum & Subarray Sum II
Subarray Sum Given an integer array, find a subarray where the sum of numbers is zero. Your code sho ...
- async与await 实例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- HTML5学习笔记(二):HTML基础学习之二
表单 表单用来传递用户数据,多用来与后端进行数据交互. 前端: <!DOCTYPE html> <html lang="en"> <head> ...