在使用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栅格布局问题的更多相关文章

  1. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  2. bootstrap(关于栅格布局)

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

  3. Bootstrap栅格布局系统的特点

    栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...

  4. CSS:谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  5. bootstrap笔记-栅格布局

    1.   .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...

  6. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  7. bootstrap的栅格布局不支持IE8该如何解决

    用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤   方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到   方法二:由于IE8不支 ...

  8. 【响应式】foundation栅格布局的“尝鲜”与“填坑”

      提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...

  9. grid栅格布局

    前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...

随机推荐

  1. Arduino智能小车--仅仅是随便一搞

    在某宝宝买的智能小车,挺精致的,开心的连接上打印机的线,结果port都没有反应, 查了一下发现是少了驱动,博主用的mac os10.12.3 CH34x_Install_V1.4.pkg 安装好之后我 ...

  2. 【转载,整理】Spotlight 监控

    非常好用,安装简易的监控软件 官网:https://www.quest.com spotlight官网链接地址:https://www.quest.com/products/#%20 一. Spotl ...

  3. App开发准备

    一. Android开发 二. IOS开发 1. 准备苹果电脑 Mac pro 一般比较贵,很少人或公司使用 替代的产品为 iMac 或 Mac mini 中配8G内存版 2. 准备苹果开发者账户,才 ...

  4. [转]OkHttp3 最有营养的初级教程

    一.前言 自从Android4.4开始,google已经开始将源码中的HttpURLConnection替换为OkHttp,而在Android6.0之后的SDK中google更是移除了对于HttpCl ...

  5. WPF学习总结1:INotifyPropertyChanged接口的作用

    在代码中经常见到这个接口,它里面有什么?它的作用是什么?它和依赖属性有什么关系? 下面就来总结回答这三个问题. 1.这个INotifyPropertyChanged接口里就一个PropertyChan ...

  6. mac 安装配置java环境变量

    1.下载java 地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.选择 ...

  7. word中公式居中编号在最右端

    1 显示标尺 2 设置居中制表符 3 在对应位置做标记 首先让公式居中 使用居中制表符在标尺的灰色地带标记位置,1)标记公式位置,鼠标左击 2)标记右边标号位置,注意和右边留有一定边距 4 公式左对齐 ...

  8. The type org.apache.commons.cli.Options cannot be resolved. It is indirectly referenced from required .class files

    在搭建好Hadoop Eclipse开发环境后,编写map-reduce,遇到如下的问题: 从字面上可以看出,工程缺少org.apache.commons.cli.Options,这个包被间接的被其他 ...

  9. session 详解

    一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...

  10. Android:UI 沉浸式体验,适合第一屏的引导图片、预览图片。

    链接:http://www.cnblogs.com/liushilin/p/5799381.html