内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <style type="text/css">

        div[class*="col-"] {

            border: 1px solid red;

        }

    </style>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body style="background-color:gray;">

    <!-- start : demo -->

    <div class="container" style="background-color:white;">

        <div class="row">

            <div class="col-md-1">1</div>

            <div class="col-md-1">2</div>

            <div class="col-md-1">3</div>

            <div class="col-md-1">4</div>

            <div class="col-md-1">5</div>

            <div class="col-md-1">6</div>

            <div class="col-md-1">7</div>

            <div class="col-md-1">8</div>

            <div class="col-md-1">9</div>

            <div class="col-md-1">10</div>

            <div class="col-md-1">11</div>

            <div class="col-md-1">12</div>

        </div>

        <!-- 偏移演示啦，只能向右侧偏移，偏移的单位是：一列 -->

        <!-- 一行还能装下 -->

        <div class="row">

            <div class="col-md-3">1</div>

            <div class="col-md-2 col-md-offset-2">2</div>

        </div>

        <!-- 当偏移的数量，一行装不下时。它会另起一行。。。-->

        <div class="row">

            <div class="col-md-4">1</div>

            <div class="col-md-3 col-md-offset-7">2</div>

        </div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 栅格系统 col-md-offset 向右偏移的更多相关文章

  1. Bootstrap3基础 栅格系统 col-lg/md/sm/xs-* 简单示例

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. Bootstrap3基础 栅格系统 标尺(col-lg/md/sm/xs-1)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. Bootstrap3基础 栅格系统 页面布局随 浏览器大小的变化而变化

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  4. Bootstrap3基础 栅格系统 col-md-push/pull 向左、右的浮动偏移

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. Bootstrap3基础 栅格系统 列中有行，行中有列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. Bootstrap3基础 栅格系统 1行最多12列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  8. bootstrap3之栅格系统

    原理 栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...

  9. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

随机推荐

  1. sleep wait yield

    sleep 暂停当前线程,允许低优先级线程获得执行机会,但并不释放对象的锁,进入不可运行状态 yield 类似sleep,但只允许同优先级有获得执行机会,同样也不会释放锁,当前线程仍是可运行状态,因此 ...

  2. 树莓派与Linux系统之间文件传输

    最近因为要学习Python,于是把放在家里接了一年灰的树莓派又给搜出来了,刚买那会也捣鼓了好一阵子, 基本操作都学会了,但现在又忘光了,只能又从头开始搞了,首先第一个要解决的是怎么把文件从电脑传输到树 ...

  3. Elasticsearch学习笔记（十一）Mapping原理

    一.Mapping的功能作用 Mapping是定义如何存储和索引一个document及其所包含字段的过程. Mapping是index和type的元数据,每个type都有自己的一个mapping,决定 ...

  4. model中的自动验证 $_validate $_auto

    普通模式: <?php class UserModel extends RelationModel{ /**自动验证**/ protected $_validate = array( /**ar ...

  5. .net js有数据 但是跳转不到操作页

    首先看的是:js  的 model 传了 两个参数 在接着打开操作页 可以看到,这一页有三个参数.id是可以自动生成的,所以不让他显示,去掉 如上就可以了 ,传的参数数量不对   ,下次注意的撒!

  6. iOS的签名机制

    1.从keychain里“从这证书颁发机构请求证书”,这样就在本地生成了一对公私钥,保存的CertificateSigningRequest就是公钥,私钥保存在本地电脑里. 2.苹果自己有一对固定的公 ...

  7. A-the Beatles

    传送门: 题意:题目给出n,k分别代表在这个环中饭店的个数和两个饭店相离的距离.然后再给出一组a,b分别代表在某一点s里最近饭店的距离和在这个s点走一步之后到达的点离最近饭店的距离. 然后问这个人再次 ...

  8. Ubuntu server LTS 16.04安装SSH以及连接问题

    1.SSH安装 出现问题: 登录到Ubuntu服务器,执行以下命令: sudo apt-get install openssh-server 出现以下错误: 解决办法: 1)确保服务器能出外网,比如说 ...

  9. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  10. ORACLE 数据库管理

    [故障处理]ORA-12162: TNS:net service name is incorrectly specified 本文将给大家阐述一个因未设置系统环境变量ORACLE_SID导致ORA-1 ...