介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; !——视口的设置,让网页能等比例的缩放到对应设备中——比;
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,/比;
& lt; !——告诉ie浏览器用最新内核去渲染网页——比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"/比;
& lt; title> Document
& lt;链接rel=皊tylesheet"https://www.yisu.com/zixun/href=" https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css ">
<风格type=" text/css ">
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
位置:相对;
最小高度:1 px;
padding-right: 10 px;
padding-left: 10 px;
}
.col-xs-1-5 {
宽度:20%;
浮:左;
}
@media (min-width: 768 px) {
.col-sm-1-5 {
宽度:20%;
浮:左;
}
}
@media (min-width: 992 px) {
.col-md-1-5 {
宽度:20%;
浮:左;
}
}
@media (min-width: 1200 px) {
.col-lg-1-5 {
宽度:20%;
浮:左;
}
}>
小编给大家分享一下引导五列布局如何实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
我们知道,在使用引导栅格的时候,我们可以对网页方便的进行模块分割.Bootstrap包含了一个响应式的,移动设备优先的,不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到12列。
它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。如果要等2分,使用col-md-6即可,要等3分,使用col-md-4即可,但如果我们要等5分或者8等分怎么办呢?下面的示例是引导五等分布局:
