<!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. JAVA分布式架构

  2. 【.Net 学习系列】-- FileSystemWatcher 监控文件夹新生成文件，并在确认文件没有被其他程序占用后将其移动到指定文件夹

    监控文件夹测试程序: using System; using System.Collections.Generic; using System.IO; using System.Linq; using ...

  3. BSON结构

    BSON结构 flyfish 2015-7-24 主要解释bsonspec.org站点上的两个样例 {"hello": "world"}  hello为key. ...

  4. Androidbuttonshape形状资源码实现

    1.项目Src下创建drawable 看文档Develop/API Guides/App Resources/Drawable/Shape Drawable 单词:corners : 角  ;  gr ...

  5. 【CERC2008】【BZOJ4319】Suffix reconstruction

    Description 话说练习后缀数组时,小C 刷遍 poj 后缀数组题. 各类字符串题闻之丧胆.就在准备对敌方武将发出连环杀时,对方一记无中生有,又一招顺 手牵羊.小C 程序中的原字符数组就被牵走 ...

  6. 关于ServerSocketChannel和SocketChannel

    1 这两个类是抽象类 源码里面它们的前面是加了abstract的. 2 抽象类是不能new出实例的 3 这两个类使用静态方法open创建其子类的实例 有动态绑定原理可知,返回的ServerSocket ...

  7. YTU 2640: 编程题：运算符重载---矩阵求和

    2640: 编程题:运算符重载---矩阵求和 时间限制: 1 Sec  内存限制: 128 MB 提交: 484  解决: 190 题目描述 /* 有两个矩阵a和b,均为2行3列.求两个矩阵之和. 重 ...

  8. YTU 2629: E1 一种颜色，三个分量

    2629: E1 一种颜色,三个分量 时间限制: 1 Sec  内存限制: 128 MB 提交: 300  解决: 226 题目描述 在计算机中,常用三种基色红(R).绿(G).蓝(B)的混合来表示颜 ...

  9. hdoj--1379--DNA Sorting（排序水题）

     DNA Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  10. SQLALchemy之创建表，删除表

    1.创建引擎 "数据库+第三方模块://用户名:密码@数据库服务端IP:端口号/数据库名?编码" engine = create_engine( "mysql+pymys ...