<!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. Redis Cluster集群搭建后，客户端的连接研究（Spring/Jedis）（待实践）

    说明:无论是否已经搭建好集群,还是使用什么样的客户端去连接,都是必须把全部IP列表集成进去,然后随机往其中一个IP写. 这样做的好处: 1.随机IP写入之后,Redis Cluster代理层会自动根据 ...

  2. u盘--软驱

    https://item.taobao.com/item.htm?spm=a230r.1.14.26.XUgxcR&id=12352589458&ns=1&abbucket=5 ...

  3. HDU-3295-An interesting mobile game(BFS+DFS)

    Problem Description XQ,one of the three Sailormoon girls,is usually playing mobile games on the clas ...

  4. influxdb常用命令

    创建数据库 create database DBName 删除数据库 drop database DBName 使用指定数据库 use DBName 显示所有表 SHOW MEASUREMENTS 删 ...

  5. Android之应用程序怎样调用支付宝接口

    http://blog.csdn.net/lilidejing/article/details/19483717 近期在做一个关于购物商城的项目,项目里面付款这块我选的是调用支付宝的接口.由于用的人比 ...

  6. c# Action,Func,Predicate委托

    System命名空间下已经预先定义好了三中泛型委托,Action,Func和Predicate,这样我们在编程的时候,就不必要自己去定义这些委托了 Action是没有返回值的 Func是带返回值的 不 ...

  7. Linux/Android——Input系统之frameworks层InputManagerService (六)【转】

    本文转载自:http://blog.csdn.net/u013491946/article/details/72638954 版权声明:免责声明: 本人在此发文(包括但不限于汉字.拼音.拉丁字母)均为 ...

  8. Poj 3233 矩阵快速幂，暑假训练专题中的某一道题目，矩阵快速幂的模板

    题目链接  请猛戳~ Description Given a n × n matrix A and a positive integer k, find the sum S = A + A2 + A3 ...

  9. NOI.AC #31 MST —— Kruskal+点集DP

    题目:http://noi.ac/problem/31 好题啊! 题意很明白,对于有关最小生成树(MST)的题,一般是要模拟 Kruskal 过程了: 模拟 Kruskal,也就是把给出的 n-1 条 ...

  10. Excel设定编辑列权限的方法

    工具---保护--允许用户编辑区域 --新建-- 选择(或输入)引用单元格 ,区域密码:对不同的人不同的区域用不同的密码,设置完成后,保护工作表(密码用管理员的),即可