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开发者来说,网页布局一直是个比较 ...
随机推荐
- CentOS7.2安装pure-ftpd 及其配置项
CentOS7.2安装FTP(pure-ftpd-1.0.43) 原文链接: https://www.linuxidc.com/Linux/2016-10/135971.htm [日期:2016-10 ...
- Knockout: radio选项切换引发click事件的一点总结
1.场景:如下图,当选择定期存款时,输入框右边出现红色的必输项星号,当选择活期存款时,不再出现该星号. 2.思路一:不使用knockout,直接用click事件,就可以实现这个需求,代码如下: < ...
- django http404 详解
[引子] 今天在看django的官方文档的时候看到get_object_or_404这个函数感觉比较奇怪.这个主要来自于它的功能,如果要查询的对象 存在那么就返回对象:如果对象不存在那么就要报404 ...
- [hihoCoder] 第五十二周: 连通性·一
题目1 : 连通性·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 还记得上次小Hi和小Ho学校被黑客攻击的事情么,那一次攻击最后造成了学校网络数据的丢失.为了避免再 ...
- ios. GCD 倒计时时间
//倒计时时间 __block int timeout = 60; dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_ ...
- keepAlive参数详解
最近研究netty5.0中 发现http例子里面有关于KeepAlive的处理,于是研究了下 http://www.nowamagic.net/academy/detail/23350305
- spring(三) spring事务操作
前面一篇博文讲解了什么是AOP.学会了写AOP的实现,但是并没有实际运用起来,这一篇博文就算是对AOP技术应用的进阶把,重点是事务的处理. --wh 一.jdbcTemplate 什么是JdbcTem ...
- 新书《深入应用C++11:代码优化与工程级应用》出版,感谢支持
经过一年的编写,这本书终于和大家见面了, 已经由机械工业出版社出版,希望本书能给学习C++尤其是C++11的朋友们更多的帮助. 关于C++11 在StackOverflow的最近一次世界性调查中,C+ ...
- win10+VS2015+boost_1.60.0
安装boost库的初衷boost库是一个C++'准'标准库,对于一个C++程序员来说,了解强大的boost库是很有必要的.当然,在学习使用这样一个强大的库之前,首先要学会安装.本文讲述了boost_1 ...
- 每日英语:Why Mom's Time Is Different From Dad's Time
Several years ago, while observing a parenting group in Minnesota, I was struck by a confession one ...