这次我们来说下列偏移：

列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

废话不多说，直接上代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->

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

    <!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 -->

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

    <title>Bootstrap-Template-05</title>

    <!-- 最新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

.show-grid { margin-top: 15px; }

.show-grid [class^="col-"] {

  padding-top: 10px;

  padding-bottom: 10px;

  background-color: #eee;

  border: 1px solid #ddd;

}

    </style>

</head>

<body>

<div class="container">

<h1>案例：列偏移<small>.col-md-offset-*</small></h1>

<div class="row show-grid">

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

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

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

</div>

<div class="row show-grid">

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

  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

</div>

<div class="row show-grid">

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

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

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

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

</div>

<div class="row show-grid">

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

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

</div>

<div class="row show-grid">

  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

</div>

</div>

    <!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

再来看看效果图吧，因为我们这里只是做了一个中等屏幕的效果，不用再做拉伸什么的，所以大家将就的看看吧。

在这里我做了2个参考行，分别是第一行和第三行，这样可以很明显的了解列偏移是多么的简单，很解释的意思是一样的。

【8】了解Bootstrap栅格系统基础案例（3）的更多相关文章

  1. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  2. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  3. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  4. 【10】了解Bootstrap栅格系统基础案例（5）

    这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...

  5. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  7. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  8. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  9. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 正则化方法 exec 和match以及test

    var patt=new RegExp(/\d+/g); var str="dfgdfg5465yhhgh65y65hh41"; var result; // var reset= ...

  2. MySQL 性能监控 4 大指标

    [编者按]本文作者为 John Matson,主要介绍 mysql 性能监控应该关注的 4 大指标. 文章系国内 ITOM 管理平台 OneAPM 编译呈现.    MySQL 是什么? MySQL  ...

  3. Mechanism of Loading Resources

    Mechanism of Loading Resources 1. Distributed strategy 1.1. Developer guilde 1.2. Notes 2. Centraliz ...

  4. linux vi 撤销重做于前进后退--转

    在vi中按u可以撤销一次操作 u   撤销上一步的操作Ctrl+r 恢复上一步被撤销的操作 注意:如果你输入“u”两次,你的文本恢复原样,那应该是你的Vim被配置在Vi兼容模式了.重做如果你撤销得太多 ...

  5. 定位CoreLocation

    一.定位 iOS三种定位方式: CoreLocation 按定位的准确性: GPS(Global Positioning System全球定位系统); 蜂窝式基站; wifi; 定位顺序:1. 首选G ...

  6. Android_Handler

    xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  7. chrome,firefox

    chrome开发者工具 firefox插件httpfox

  8. MongoDB基本操作

    转:http://zhidao.baidu.com/link?url=D5s4tNnP6hH0XPZkFooV-o4MQH3pNZh7C3rtLX_HtVWaIyBRhLIUyoZYfVv15l2eS ...

  9. Visual Studio.NET、asp.net和C#间的关系是怎样的？

    asp.net是一种技术,要实现这种技术,就得有底层的实现技术编程语言,这个语言就是C#,(只是绝大多数首选C#),要想用C#实现asp.net技术,就得有编程的工具软件,这个软件我一直用visual ...

  10. Anddoi 将时间转换为指定时区的时间

    import java.text.Format;import java.text.ParseException;import java.text.SimpleDateFormat;import jav ...