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开发者来说,网页布局一直是个比较 ...
随机推荐
- HTML自定义对象与属性探究(谷歌,火狐,IE9浏览器没问题)
1.自定义标签 <zqz>asdas</zqz> <style> zqz{ color:red; } </style> 页面变色 2.自定义标签的hov ...
- unfolding maps支持中文
由于项目需要,选择了processing+unfolding的方式进行数据可是话的开发,unfolding maps是一个非常强大的地图工具,processing可以灵活自如的表达各种图形/效果.使用 ...
- hackerrank-knapsack
https://www.hackerrank.com/challenges/unbounded-knapsack 题目描述: #include <iostream> #include &l ...
- 如何在WPF中调用Winform控件
原文地址:http://hi.baidu.com/stuoopluwqbbeod/item/32ec38403da42ee2bcf45167 功能实现主要分三步:1.添加两个引用:WindowsFor ...
- hudson用SVN插件下载代码,用ant插件打包, 用SSH插件部署
hudson自动化部署步骤 1.SVN插件->下载代码 2.ant插件->war打包 (hudson服务器上可安装多个版本ant,每个项目可以选择一个ant版本.Build File ...
- eclipse CDT写c++使用文件作为输入源(输入重定向)
在main函数第一句添加下面. freopen("inputfile","r",stdin); 创建一个inputfile,放project根文件夹下. 注意添 ...
- Bug:java.lang.StackOverflowError: stack size 8MB
在开发的时候遇到了这个Bug:java.lang.StackOverflowError: stack size 8MB Log: 11-27 14:16:37.093 21892-21892/com. ...
- 使用sqoop将MySQL数据库中的数据导入Hbase
使用sqoop将MySQL数据库中的数据导入Hbase 前提:安装好 sqoop.hbase. 下载jbdc驱动:mysql-connector-java-5.1.10.jar 将 mysql-con ...
- nil
Lua中特殊的类型,他只有一个值:nil:一个全局变量没有被赋值以前默认值为nil:给全局变量负nil可以删除该变量.
- 使用Windows 10专业版 进行VS2017开发 遇到 HTTP Error 400. The request hostname is invalid
使用IIS Express 支持非localhost访问 只要使用域名或者本机IP地址都无法进行 iisexpress 调试 公网ip,还是127.0.0.1都出现上面那个错误 主要是新的系统环境 ...