有的时候，我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度，效果如图2-4所示。

实现上述效果，只需要在下一个列上应用offset样式即可（因为该样式设置的是margin-left）。代码如下：
<div class="row">
    <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>

html css col-md-offset的更多相关文章

  1. css选择器.md

    css选择器总结 1.元素选择器 如:*{},body{},p{} ; xml中note{},to{},from{} 2.class与id选择器 如:.class{},#id{} 3.伪类选择器 选择 ...

  2. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  3. .offset().top是什么意思？

    offset获取匹配元素在当前视口的相对偏移: 返回的对象包含两个整形属性:top,left.此方法只对 可见元素有效. $("#div").offset() 获得位移对象:(此时 ...

  4. 【面试必备】CSS盒模型的点点滴滴

    从接触CSS布局开始,就一直在听盒模型的概念了,网上的文章有很多,深浅不一.有些人会认为盒模型很简单,不就是border.margin.padding.content嘛,一个元素所占的空间就是把它们都 ...

  5. jquery知识 属性 css

    jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta chars ...

  6. css常用布局

    1.一列布局 html: <div class="header"></div> <div class="body">< ...

  7. jquery+css实现邮箱自动补全

    今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...

  8. antd 如何让 Row 中的 Col 自动换行？

    1.解决方案 在需要换行处,设置一个空的 Col // 空白(特殊情况处理) const empty = ( <Col md={6} sm={24}></Col> ); .

  9. row and col

    1.行 <Row gutter={{ md: 6, lg: 12, xl: 12 }}></Row> gutter: md: 中等屏幕 桌面显示器 (≥992px) lg: 大 ...

  10. jquery-8 jquery如何处理css样式

    jquery-8  jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...

随机推荐

  1. 1.oracle之表管理sql

    /*数据类型1. number(M,N)   整数位和小数位最多是M,其中小数位为N位2. char(M):定长字符串,长度为M,如果插入数据时长度小于M,则在末尾补上空格3. varchar2(M) ...

  2. 【leetcode】443. String Compression

    problem 443. String Compression Input ["a","a","b","b"," ...

  3. c++ 网络库

    1.libevent 2.boost::asio 3.ace boost::asio以前看过,不过忘记了 学习,学习

  4. Arcmap连接数据库需管理员获取许可——创建ArcSDE连接文件

    一.在装有server的服务器上创建ArcSDE连接文件 1.打开ArcMap<<ArcToolBox<<数据管理工具<<工作空间<<创建ArcSDE连 ...

  5. PTA——蠕虫爬井

    PTA 7-46 爬动的蠕虫 #include<stdio.h> int main() { ; scanf("%d%d%d",&N,&U,&D) ...

  6. Ubuntu16.04的sublime text3 的安装教程

    1. sublime text3的官网位置 https://www.sublimetext.com/3 2.apt安装方式 1.  安装 GPG -key: wget -qO - https://do ...

  7. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

  8. zombodb 几点说明

    内容来自官方文档,截取部分 默认es 索引的副本为0 这个参考可以通过修改索引,或者在创建的时候通过with 参数指定,或者通过pg 的配置文件中指定 索引更多的列以为这使用了更多的es 能力 索引的 ...

  9. select 查询

    使用as给字段起别名,例如:select name as 姓名 from student; 模糊匹配(like) "_":一个占位符.例子:select * from studen ...

  10. tinycc update VERSION to 0.9.27

    TinyCC全称为Tiny C Compiler, 是微型c编译器,可在linux/win/平台上编译使用. 在用代码里面使用tcc当脚本,性能比lua还快,目前已有网游服务端使用TCC脚本提高性能. ...