<!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. MongoDB使用教程收集（语法教程）

    https://www.tutorialspoint.com/mongodb/index.htm https://wizardforcel.gitbooks.io/w3school-mongodb/c ...

  3. NYOJ 55 懒省事的小明(哈弗曼树)

    懒省事的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述       小明非常想吃果子,正好果园果子熟了. 在果园里,小明已经将全部的果子打了下来,并且按果子的不 ...

  4. react 项目实战（八）图书管理与自动完成

    图书管理 src / pages / BookAdd.js   // 图书添加页 /** * 图书添加页面 */ import React from 'react'; // 布局组件 import H ...

  5. 【剑指Offer】俯视50题之31 - 40题

    面试题31连续子数组的最大和 面试题32从1到n整数中1出现的次数 面试题33把数组排成最小的数 面试题34丑数 面试题35第一个仅仅出现一次的字符 面试题36数组中的逆序对 面试题37两个链表的第一 ...

  6. dorker 安装

    http://www.docker.org.cn/book/install/install-docker-win7-win8-requirements-38.html1. 你先去下载Docker To ...

  7. Bootstrap button源码分析

    /* ======================================================================== * Bootstrap: button.js v ...

  8. CSP 201612-4 压缩编码 【区间DP+四边形不等式优化】

    问题描述 试题编号: 201612-4 试题名称: 压缩编码 时间限制: 3.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一段文字,已知单词a1, a2, …, an出现的频率分别t1 ...

  9. H264--1--编码原理以及I帧B帧P帧[4]

    ---------------------- 前言 ----------------------- H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称,在编码方面,我理解的他的理 ...

  10. ODB——基于c++的ORM映射框架尝试(使用)

    摘要: 2.使用 首先,需要定义一个对象,用来和数据库字段对应: [cce lang=”cpp”] #ifndef VOLUME_H #define VOLUME_H #include #includ ...