<!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文件工具类

    package com.xyworkroom.ntko.util; import java.io.File; import java.io.FileInputStream; import java.i ...

  2. 七牛云上传图片到cdn，cdn返回的是一个只有图片的url

    如:

  3. the apple code

    i know you will forget but 9 you will

  4. paramiko错误信息：Paramiko error: size mismatch in put

    在使用paramiko的put往远处服务器上传资源的时候,出现类似下面的错误信息 The code in paramiko's sftp_client.py:putfo() reads at the ...

  5. 卸载MySQL 5.0

    昨天在Navicat for mysql中导入一个脚本,执行.出现乱码. 考虑到可能是版本号问题,就想卸载了又一次安装MYSQL,这一卸载倒是出了问题.导致安装的时候安装不上. 后来无意发现是卸载的时 ...

  6. Mac使用技巧之Finder的个人收藏

    当使Finder的时候,左側会列出来个人收藏,能够非常方便的打开对应的文件夹.那么怎样把自己新建的文件夹也增加到个人收藏呢? 1.默认的个人收藏 2.新建名字为my_ios_demo文件夹,拖动这个文 ...

  7. DG备库磁盘空间满导致无法创建归档

    上周五去某客户那里做数据库巡检.是window 2008系统上10g的一套NC系统的库,已经配置了DG,可是巡检时发现数据库报错: Tue Nov 11 10:13:57 2014 LNS: Stan ...

  8. jquery.validate自己定义验证--成功提示与择要提示

    1. 自己定义验证--成功提示 1) 加入选项 errorClass: "unchecked". validClass: "checked", errorEle ...

  9. js图片懒加载（滚动加载）判断是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  10. Android学习笔记(14):相对布局RelativeLayout

    相对布局RelativeLayout,继承自ViewGroup.相对布局的子组件的位置总是相对于兄弟组件或者父容器决定的. RelativeLayout支持的XML属性: android:gravit ...