bootstrap栅格分5等分
電腦端：設(shè)置一個類名，width:20%
?
?
手機(jī)端
代碼
：<!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開發(fā)</h3>
????????????????<p>公司擁有國內(nèi)頂級IOS開發(fā)團(tuán)隊，為您提供一站式的IOS手機(jī)
????????????????????app定制開發(fā)服務(wù)</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div2"></div>
????????????????<h3>Android開發(fā)</h3>
????????????????<p>安卓APP應(yīng)用軟件已經(jīng)占據(jù)國內(nèi)移動應(yīng)用市場的50%以上，開發(fā)安卓手機(jī)
????????????????????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>微信開發(fā)</h3>
????????????????<p>北京億佰藍(lán)圖公司為您提供專業(yè)的微信公眾平臺二次開發(fā)以及微信商城網(wǎng)站
????????????????????個性化定制開發(fā)服務(wù)</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div4"></div>
????????????????<h3>html5手機(jī)站開發(fā)</h3>
????????????????<p>HTML5是未來網(wǎng)絡(luò)發(fā)展的趨勢，可以實現(xiàn)各種多媒體效果，如視頻、音頻等
????????????????????無需任何插件即可觀看收聽</p>
????????????</div>
????????????<div class="col-zdlg-2-5 ?col-xs-6 text-center">
????????????????<div class="text-center div5"></div>
????????????????<h3>WEB網(wǎng)站開發(fā)</h3>
????????????????<p>國內(nèi)知名的web網(wǎng)站開發(fā)公司北京億佰藍(lán)圖，擁有多年的網(wǎng)站建設(shè)經(jīng)驗，提供
????????????????????高端型網(wǎng)站定制開發(fā)服務(wù)</p>
????????????</div>
????????</div>
????</div>
</div>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/yuanyuan-1994/p/8781306.html
總結(jié)
以上是生活随笔為你收集整理的bootstrap栅格分5等分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 要考试了四年级下册如何四天内速学英语
- 下一篇： 关于在ROS kinetic下arbot