<!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. 真正明白c语言二级指针

    指针是C语言的灵魂,我想对于一级指针大家应该都很熟悉,也经常用到:比如说对于字符串的处理,函数参数的“值,结果传递”等,对于二级指针或者多级指针,我想理解起来也是比较容易的,比如二级指针就是指向指针的 ...

  2. android通过查询电话号码获取联系人信息

    // 取得Intent中的頭像 ivShowImage = (ImageView) findViewById(R.id.call_log_detail_contact_img); //通话电话号码获取 ...

  3. 删除SVN被锁定文件

    svn的working copylocked这种情况大多是因为上次svn命令执行失败且被锁定了. 如果cleanup没有效果的话只好手动删除锁定文件. cd 到svn项目目录下,然后执行命令:del ...

  4. WM_COMMAND 和 WM_NOTIFY 的区别

    当我们按下一个菜单选项,或者一个控件需要通知父窗口一个事件发生(如鼠标单击.双击等),或者快捷键被按下时,Windows将会发送一个 WM_COMMAND 消息给父窗口.那么 WM_COMMAND 消 ...

  5. java中length的用法

    总结:length是属性...有很多种,不仅仅是指长度 package com.c2; import java.io.BufferedReader; import java.io.IOExceptio ...

  6. thinkphp中url的生成U()方法

    为了配合所使用的URL模式,我们需要能够动态的根据当前的URL设置生成对应的URL地址,为此,ThinkPHP内置提供了U方法,用于URL的动态生成,可以确保项目在移植过程中不受环境的影响.U方法的定 ...

  7. 转：oracle几组重要的常见视图-v$process，v$session，v$session_wait，v$session_event

    v$process 本视图包含当前系统oracle运行的所有进程信息.常被用于将oracle或服务进程的操作系统进程ID与数据库session之间建立联系.在某些情况下非常有用: 1 如果数据库瓶颈是 ...

  8. [Kingdom Rush]团队分享:如何做塔防手游

    转自:http://www.gamelook.com.cn/2015/03/207324 GameLook报道/2014年11月,乌拉圭开发商Ironhide Studios发布的<Kingdo ...

  9. django-上传文件 fromdata（头像实例）

    上传文件头像的2种方法,简单实例来看下用法 用法定义,fromdata可以传输任何数据 HttpRequest.FILES 一个类似于字典的对象,包含所有的上传文件信息. FILES 中的每个键为&l ...

  10. python's thirty day for me 异常处理

    ---恢复内容开始--- 程序的异常:报错之后程序终止. 异常处理搭配使用: l = ['创建老师','创建学校'] while True: try: for num,item in enumerat ...