1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap3 Grid no gutter</title>
  8.     <!--[if lt IE 9]>
  9.     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
  10.     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  11.     <![endif]-->
  12.     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  13.     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  14.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  15.  
  16.     <style>
  17.         /*bootstrap无间距栅格*/
  18.         .row.no-gutter {
  19.             margin-left: 0;
  20.             margin-right: 0;
  21.         }
  22.  
  23.         .row.no-gutter > [class*='col-'] {
  24.             padding-right: 0;
  25.             padding-left: 0;
  26.         }
  27.  
  28.         .demo {
  29.             border: 1px solid #e2b709;
  30.             word-wrap: break-word;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.  
  36. <div class="container-fluid">
  37.     <div class="row no-gutter clearfix">
  38.         <div class="col-sm-6">
  39.             <h1 class="demo">AAAAAAAAAAAA</h1>
  40.         </div>
  41.         <div class="col-sm-6">
  42.             <h1 class="demo">BBBBBBBBBBBB</h1>
  43.         </div>
  44.     </div>
  45.  
  46.     <div class="row clearfix">
  47.         <div class="col-sm-6">
  48.             <h1 class="demo">DDDDDDDDDDD</h1>
  49.         </div>
  50.         <div class="col-sm-6">
  51.             <h1 class="demo">EEEEEEEEEEE</h1>
  52.         </div>
  53.     </div>
  54. </div>
  55.  
  56. </body>
  57. </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. CentOS firewall添加开放端口

    添加 firewall-cmd --zone=public --add-port=80/tcp --permanent (–permanent永久生效,没有此参数重启后失效) 重新载入 firewal ...

  2. Linux下C编程的学习_1

    0x0:为什么写这个系列的文章 博客原本的定位是安卓游戏的破解,可是为什么写这系列的文章呢? 由于在破解过程中,我们是无法避免来敲代码的,恢复算法,模拟算法,游戏中对数据的解密.游戏中对保存在clie ...

  3. 七夕节 看到很多停止更新的blog 莫名有点淡淡的忧桑

    又是一年七夕.又是一年单身.看到很多停止更新的blog, 仿佛看到了一茬一茬的程序猿 进入it 圈 又离开it圈,就有莫名的忧桑

  4. node+express+mysql小例子

    连接:https://www.cnblogs.com/humaotegong/p/5671009.html https://www.cnblogs.com/mibear/p/nodejs.html?u ...

  5. C#字符串数组排序 C#排序算法大全 C#字符串比较方法 一个.NET通用JSON解析/构建类的实现(c#) C#处理Json文件 asp.net使用Jquery+iframe传值问题

    C#字符串数组排序   //排序只带字符的数组,不带数字的 private   string[]   aa   ={ "a ", "c ", "b & ...

  6. WCF探索之旅（五）——WCF与WebService的异同

    前几篇文章我们简单的介绍了WCF以及怎样使用它,今天我们来讨论一下WCF和WebService的异同. 相信大多数同学跟我一样,对于WebService有所了解.并且应该说你是先听说WebServic ...

  7. [LeetCode][Java] Jump Game II

    题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...

  8. 一张图告诉你是须要 SQL 还是 Hadoop

    译序 非常多朋友问时下如火如荼的 Hadoop 是否适合引进我们自己的项目,什么时候用 SQL.什么时候用 Hadoop,它们之间怎样取舍?Aaron Cordova 用一张图来回答你这个问题,对于不 ...

  9. android开发真机调试 相关东东

    android开发真机调试 相关东东 我们做android开发的时候,可以用模拟器,也可以真机调试,但是电脑配置不高的话,模拟器,真的是慢的有的一说,所以我一直倾向于用真机调试,但是问题也就来了,模拟 ...

  10. OSX:不同OSX版本号的标记可能不兼容

    现象: 依据測试,中文OS X 10.9和中文10.10的文件标记彼此不兼容. 也就是说.比方在10.9中的颜色标记,在10.10DP2中不能删除,但能够加入/删除10.10自己的颜色标记,反之亦然. ...