废话少说，先上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap Grid System</title>

<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
</div>
<div class="row">
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
</body>
</html>

自己新建一个html文档，然后在浏览器中打开效果如下所示：

所以如果你要定义成5列的话只需要bootstrap的列的样式，然后重新定义列宽就好了，不要修改bootstrap本身的列宽，那样会影响你其他页面使用的。

bootstrap如何自定义5列的更多相关文章

  1. Ruby Rails学习中：网站导航，Bootstrap和自定义的CSS，局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  2. JqGrid自定义的列

    $("#gridTable").jqGrid({ //...其它属性 colModel: [ //...其它列 { name: 'dsource_alarm', index: 'd ...

  3. SharePoint 2013 关于自定义显示列表表单的bug

    1.在SharePoint 2013中,我们隐藏列表Dispform页面的ListFormWebPart部件,转而使用自定义显示列表表单进行展示,因为这样更容易定制我们需要的显示: 2.之后发现文件夹 ...

  4. WPF DEV gridcontrol 自定义计算列(TotalSummary)

    /// <summary> /// 自定义计算列 /// </summary> /// <param name="sender"></pa ...

  5. JqGrid自定义(图片)列

    $("#gridTable").jqGrid({ //...其它属性 colModel: [ //...其它列 { name: , align: "center" ...

  6. vue实现自定义表格列

    在我们开发PC端的项目使用表单时,尤其是crm系统,应该经常会遇到这样的需求, 用户需要根据设置来自定义显示列. 查了element的官方文档, 并没有此类组件, 所以手动封装了一个简单的组件, 希望 ...

  7. Bootstrap Blazor 组件介绍 Table （二）自定义模板列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  8. bootstrap自定义——栅格列数修改

    从下载的bootstrap文件中找到less文件夹里面的variables.less,然后可以找到栅格列数进行修改 然后执行一下bootstrap.less,通过命令行,切换到其所在的目录D:\03 ...

  9. Django:bootstrap table自定义查询实现

    参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...

随机推荐

  1. YII 数据库查询

    $userModel = User::Model(); $userModel->count(); $userModel->count($condition); $userModel-> ...

  2. JavaScript事件驱动机制&amp;定时器机制

    在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力.在NodeJS中.异步事件驱动模型则是提高并发能力的基础. 一.程序怎样响应事件 程序响应外部的事件有两 ...

  3. doT.js变量和数组混合读取方式

    可以包裹任意大小的html 变量在其包裹的任意区域都有效 单个变量可以和数组分开展示 最好放置在最下方执行js 数据结构 var data = { "id": "1280 ...

  4. [jzoj 6086] [GDOI2019模拟2019.3.26] 动态半平面交 解题报告 (set+线段树)

    题目链接: https://jzoj.net/senior/#main/show/6086 题目: 题解: 一群数字的最小公倍数就是对它们质因数集合中的每个质因数的指数取$max$然后相乘 这样的子树 ...

  5. 11.使用boostregex遭遇无法打开libboost_regex-vc120-mt-sgd-1_62.lib的问题

    通过Boost库可以在C++项目中使用正则表达式,配置好环境后链接过程出现”无法打开libboost_regex-vc120-mt-sgd-1_62.lib”的错误.  原因是按照官方生成lib的方法 ...

  6. Windows下本机简易监控系统搭建（Telegraf+Influxdb+Grafana）--转

    原文地址:http://www.cnblogs.com/liugh/p/6683488.html 一.文件准备 1.1 文件名称 telegraf-1.2.1_windows_amd64.zip in ...

  7. POJ 3723 Conscription （Kruskal并查集求最小生成树）

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14661   Accepted: 5102 Des ...

  8. pic16F1938

    1.中断自动保存寄存器:W.STATUS.BSR.FSR和PCLATH,而且如果中断中需要改变这些寄存器,在Bank31中修改这些寄存器的影子寄存器即可. 2.RAM有1024字节,分为N个bank, ...

  9. 使用python绘制词云

    最近在忙考试的事情,没什么时间敲代码,一个月也没几天看代码,最近看到可视化的词云,看到网上也很多这样的工具, 但是都不怎么完美,有些不支持中文,有的中文词频统计得莫名其妙.有的不支持自定义形状.所有的 ...

  10. RMAN删除归档脚本

    crosscheck archivelog all;   delete noprompt expired archivelog all;   delete noprompt archivelog un ...