<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3 Grid no gutter</title>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <style>
/*bootstrap无间距栅格*/
.row.no-gutter {
margin-left: 0;
margin-right: 0;
} .row.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
} .demo {
border: 1px solid #e2b709;
word-wrap: break-word;
}
</style>
</head>
<body> <div class="container-fluid">
<div class="row no-gutter clearfix">
<div class="col-sm-6">
<h1 class="demo">AAAAAAAAAAAA</h1>
</div>
<div class="col-sm-6">
<h1 class="demo">BBBBBBBBBBBB</h1>
</div>
</div> <div class="row clearfix">
<div class="col-sm-6">
<h1 class="demo">DDDDDDDDDDD</h1>
</div>
<div class="col-sm-6">
<h1 class="demo">EEEEEEEEEEE</h1>
</div>
</div>
</div> </body>
</html>

bootstrap3无间距栅格/grid no-gutter的更多相关文章

  1. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  2. Bootstrap3.0的栅格布局系统实现原理

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  3. vue element-ui 饿了么布局,gutter间距碰上bordr 会失效

    //如下情况,gutter间距会失效 <el-row :gutter="20"> <el-col :span="12" style=" ...

  4. 浅谈css的栅格布局

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

  5. PADS无模命令总结

    1.PADS2007无模命令与快捷键 <x.y>表示坐标.<s>表示文体.<n>表示数字. 1.[C]显示平面的焊盘和热焊盘(Thermal). 2.[D]显示当前 ...

  6. State Lattice Planner(状态栅格规划)

    参考文献: Efficient constrained path planning via search in state lattices Differentially Constrained Mo ...

  7. Web UI设计师需要了解的用栅格化系统指导网页设计

    出处:https://www.jianshu.com/p/9838f217f4f6 致敬,,, ---------------------------------------------------- ...

  8. CSS3全览_最新布局

    CSS3全览_最新布局 目录 CSS3全览_最新布局 1. 浮动及其形状 2. 定位 3. 弹性盒布局 4. 栅格布局 5. 表格布局 作者: https://www.cnblogs.com/xiax ...

  9. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

随机推荐

  1. Ubuntu 16.04设置Redis为开机自动启动服务

    继上一篇文章http://www.cnblogs.com/EasonJim/p/7599941.html安装好Redis后,假设文件已经安装到/usr/local/redis目录下.假设我安装的版本为 ...

  2. Linux下tmp文件夹的文件自动删除的问题(转)

    场景: 近日发现有一台机器tmp文件夹下放置的文件无辜丢失,而且排查发现是自动丢失,并且,只是删除10天之前的文件. 本来以为是哪位写了一个自动执行脚本, find了一下10天前的文件删除了. 结果, ...

  3. JAVA调用动态链接库(dll)

        菜鸡爬坑 基础知识  因为某个东西的keygen我只会在win下生成!! 所以只能出此下策!!之前一直是android下用jni调用so文件,现在试下java在win平台下调用dll 首先还是 ...

  4. IE插件

    在OA上要直接查看word等公告文件,就必须安装office控件.要安装office控件,需要在IE浏览器中做相应的设置.如何设置呢,下面由小编具体介绍下. 工具/原料   OA IE浏览器 方法/步 ...

  5. SVN 资源权限管理系统 SVNAdmin

    原文:https://www.oschina.net/p/svn-admin

  6. JMS消息中间件原理及ActiveMQ用法

    导读: JMS:Java消息服务(Java Message Service)应用程序接口.是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消息.进行 ...

  7. C语言之基本算法21—可逆素数

    /* ================================================================== 题目:可逆素数是指一个数是素数,逆序后还是素数,如ABC是素 ...

  8. Linux查看文件最后几行的命令

    tail -n 20 filename说明:显示filename最后20行

  9. easyUI的下拉框combobox与树tree联动

    参与联动的有 2 个combobox 和 1 个tree: <input id="combobox1" class="easyui-combobox" n ...

  10. 网关 192.168.2.1 114.114.114.114 dns查询

    在浏览器输入域名 分析抓包数据 分析 ip 192.168.3.123 网关192.168.2.1