<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 嵌套列</title>

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

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

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

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>第一列</h4>

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>第二列 - 分为四个盒子</h4>

         <div class="row">

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>Consectetur art party Tonx culpa semiotics. Pinterest

                  assumenda minim organic quis.

               </p>

            </div>

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p> sed do eiusmod tempor incididunt ut labore et dolore magna

                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation

                  ullamco laboris nisi ut aliquip ex ea commodo consequat.

               </p>

            </div>

         </div>

         <div class="row">

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>quis nostrud exercitation ullamco laboris nisi ut

                  aliquip ex ea commodo consequat.

               </p>

            </div>

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

                  sed do eiusmod tempor incididunt ut labore et dolore magna

                  aliqua. Ut enim ad minim.</p>

            </div>

         </div>

      </div>

   </div>

</div>

</body>

</html>

bootstrap实现嵌套列的更多相关文章

  1. tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算

    bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时 <div class="row" > <!--row a--> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 第四篇.Bootstrap网格系统偏移列和嵌套列

    偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div class="row"> <div class=" ...

  4. Bootstrap 列偏移\列嵌套\列排序

    1.列偏移 这个其实很简单就是通过一个样式类,通过.col-md-offset-*可以将列偏移到右侧.这些class通过使用*选择器将所有列增加了列的左侧margin.例如,.col-md-offse ...

  5. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  6. BootstrapValidator验证规则、BootStrap表格：列参数

    BootstrapValidator验证规则 需引用组件 <script src="~/Scripts/jquery-1.10.2.js"></script> ...

  7. Bootstrap3 栅格系统-嵌套列

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

  8. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  9. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

随机推荐

  1. Vue脚手架搭建过程

    1.使用npm全局安装vue-cli(前提是你已经安装了nodejs,否则你连npm都用不了),在cmd中输入一下命令 npm install --global vue-cli 安装完成后,创建自己的 ...

  2. linux 系统创建软连接

    ln -s /data/var/ /usr/local/smokeping/var 需求:/var/本身在/usr/local/smokeping/var下,想要把/usr/local/smokepi ...

  3. MongoDB-WriteConcern

    WriteConcern safe=false 非安全模式 很快

  4. ffmpeg摄像头采集h264编码RTP发送

    一. 相关API说明 1. av_register_all 2. avformat_network_init 不管是流媒体发送还是流媒体接收, 需要先执行该函数. 3. avformat_alloc_ ...

  5. 【转】在Linux下使用Jmeter执行测试任务

    想在Linux下运行jmeter必须先安装jdk,安装步骤如下: (1).下载一个linux可用的jdk包(比如:jdk-6u45-linux-i586.bin), (2).然后将jdk-6u45-l ...

  6. Windows10 官方原版镜像下载途径 Label:win10解决方案

    https://www.microsoft.com/en-gb/software-download/windows10ISO 设置浏览标签为手机以避免跳转,下载即可  或者手机打开该网址,获取下载链接 ...

  7. php中的move_uploaded_file

    1.定义和用法 move_uploaded_file() 函数将上传的文件移动到新位置. 若成功,则返回 true,否则返回 false. 2.语法 move_uploaded_file(file,n ...

  8. mybatis~SQL映射

    student.xml里面是这么写的: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE m ...

  9. 解决word自动编号出现内容空格过大的问题

    选择你需要调整的段落.右键点击.选择“调整列表缩进” 然后在弹出的窗口中,第三行的“制表符”改成“空格”即可.或者空格都不需要可以改为“不特别标注”. 当编号超过10的时候,也会有空格太大的现象,这时 ...

  10. Python之二维数组N*N顺时针旋转90度

    需求:把一个二维数组顺时针旋转90度,现实数据的替换. 比如把4*4的二维数组顺时针旋转90度 原始数据是一个嵌套列表:[['A', 'B', 'C', 'D'], ['A', 'B', 'C', ' ...