文档章节

bootstrap 栅格系统实现类似table跨行

xiaoyang0878
 xiaoyang0878
发布于 2015/11/26 10:25
字数 132
阅读 2705
收藏 2

通过bootstrap 栅格系统实现类似table跨行 的效果,如下:


具体代码如下:

<div class="row">
	<div class="col-sm-2" style="padding-right: 0px;">
		<div class="noRb" id="freeDiv" style="height: 60px;">
			Free
		</div>
	</div>
	<div id="freeShiftDiv" class="col-sm-10">
		<div class="row dataRow">
			<div>1</div>
		</div>
		<div class="row dataRow">
			<div>1</div>
		</div>
	</div>
</div>



1、其中dataRow为我自己定义的样式。

2、

<div class="noRb" id="freeDiv" style="height: 60px;">

这里的height:60px,与下面的dataRow中的height要相符。






© 著作权归作者所有

xiaoyang0878
粉丝 17
博文 52
码字总数 7963
作品 0
闸北
程序员
私信 提问
bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播: 官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$('.carousel').carsouse...

fareise
2015/08/31
504
0
CSS响应式设计之栅格系统

说到栅格系统(grid system),你也许见过这样的概念: 像这样,通过固定的格子结构,来进行布局设计。这是一种设计风格,而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整,可...

独孤蝈蝈
2016/10/24
98
0
从零开始学 Web 之 移动Web(七)Bootstrap

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/14
0
0
CSS 栅格系统原理分析

众所周知,现在前端有很多类似于bootstrap,foundation这样优秀的UI框架,它们都提供了自己的一套响应式布局方案,即栅格系统。用过的人都知道只要给页面的元素添加其栅格系统指定的类名,就...

爱coding的husky
2017/11/03
0
0
Bootstrap~页面的布局

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页...

mcy247
2017/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB系列-在复制集(replication)以及分片(Shard)中创建索引

关注我,可以获取最新知识、经典面试题以及微服务技术分享   在使用MongoDB时,在创建索引会涉及到在复制集(replication)以及分片(Shard)中创建,为了最大限度地减少构建索引的影响,在副本...

ccww_
30分钟前
25
0
SAP HANA数据库multi container模式JDBC链接connection refused

报错如下信息 com.sap.db.jdbc.exceptions.JDBCDriverException: SAP DBTech JDBC: Cannot connect to jdbc:sap://xxx.xxx.xxx.xxx:30015 [Cannot connect to host xxx.xxx.xxx.xxx:30015 [C......

flash胜龙
55分钟前
45
0
c++ 虚基类

c++ 虚基类 p556

天王盖地虎626
今天
97
0
k8s删除Terminating状态的命名空间

背景: 我们都知道在k8s中namespace有两种常见的状态,即Active和Terminating状态,其中后者一般会比较少见,只有当对应的命名空间下还存在运行的资源,但是该命名空间被删除时才会出现所谓的...

Andy-xu
今天
94
0
seata源码阅读笔记

seata源码阅读笔记 本文没有seata的使用方法,怎么使用seata可以参考官方示例,详细的很。 本文基于v0.8.0版本,本文没贴代码。 seata中的三个重要部分: TC:事务协调器,维护全局事务和分支...

东都大狼狗
今天
57
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部