bootstrap栅格分5等分
電腦端：設置一個類名，width:20%
?
?
手機端
代碼
：<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Title</title>
????<style>
????????#manage{
????????????margin: 0 0 ?55px 0;
????????}
????????#manage .col-zdlg-2-5{
????????????width: 20%;
????????????float: left;
????????}
????????#manage .col-zdlg-2-5 .div1{
????????????width: auto;
????????????height: 100px;
????????????background: url("./image/service11.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div2{
????????????width: auto;
????????????height: 100px;
????????????background: url("./image/service22.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div3{
????????????width: auto;
????????????height: 100px;
????????????background: url("./image/service33.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div4{
????????????width: auto;
????????????height: 100px;
????????????background: url("./image/service44.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div5{
????????????width: auto;
????????????height: 100px;
????????????background: url("./image/service55.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div1:hover{
????????????background: url("./image/service1.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div2:hover{
????????????background: url("./image/service2.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div3:hover{
????????????background: url("./image/service3.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div4:hover{
????????????background: url("./image/service4.png") no-repeat center center;
????????}
????????#manage .col-zdlg-2-5 .div5:hover{
????????????background: url("./image/service5.png") no-repeat center center;
????????}
????????@media screen and (min-width: 768px) {
????????????#manage .col-zdlg-2-5{
????????????????float: left;
????????????????width:20%;
????????????}
????????}
????????@media screen and (max-width: 767px) {
????????????#manage .col-zdlg-2-5 {
????????????????float: left;
????????????????width: 100%;
????????????}
????????}
????</style>
</head>
<body>
<div id="manage">
????<div class="container text-center">
????????<div class="row ">
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div1"></div>
????????????????<h3>iOS開發</h3>
????????????????<p>公司擁有國內頂級IOS開發團隊，為您提供一站式的IOS手機
????????????????????app定制開發服務</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div2"></div>
????????????????<h3>Android開發</h3>
????????????????<p>安卓APP應用軟件已經占據國內移動應用市場的50%以上，開發安卓手機
????????????????????app軟件的重要性日益凸顯</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<!--<img src="image/service33.png">-->
????????????????<div class="text-center div3"></div>
????????????????<h3>微信開發</h3>
????????????????<p>北京億佰藍圖公司為您提供專業的微信公眾平臺二次開發以及微信商城網站
????????????????????個性化定制開發服務</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div4"></div>
????????????????<h3>html5手機站開發</h3>
????????????????<p>HTML5是未來網絡發展的趨勢，可以實現各種多媒體效果，如視頻、音頻等
????????????????????無需任何插件即可觀看收聽</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div5"></div>
????????????????<h3>WEB網站開發</h3>
????????????????<p>國內知名的web網站開發公司北京億佰藍圖，擁有多年的網站建設經驗，提供
????????????????????高端型網站定制開發服務</p>
????????????</div>
????????</div>
????</div>
</div>
</body>
</html>
轉載于:https://www.cnblogs.com/yuanyuan-1994/p/8781306.html
總結
以上是生活随笔為你收集整理的bootstrap栅格分5等分的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 要考试了四年级下册如何四天内速学英语
- 下一篇： 信披违规什么意思