• bootstrap实现pc屏幕五等分


    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>屏幕五等分</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
    @media (min- 1200px) {
    .col-zdlg-2-5{
    float: left;
    20%;

    }
    }
    h2{
    font-family: "Microsoft Yahei";
    font-weight: 500;
    line-height: 1.1;
    color:#000;
    }

    .col-red-border{
    border:1px solid red;
    }
    </style>
    </head>
    <body>
    <div class="container-fluid">
    <div class="rows">
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
    <h2>屏幕五等分</h2>
    </div>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    apue第16章笔记
    重构与重写
    架构方面的笔记
    多进程失败拉起的demo
    Elasticsearch match_phrase用法
    c++风格
    cocos2d-x 3.2 移植到android
    Mac 下配置 Cocos2d-x 3-x android 的环境
    解决最新版的ADT没有NDK选项的问题
    待飞日记(第六天和第七天)
  • 原文地址:https://www.cnblogs.com/herd/p/5922803.html
Copyright © 2020-2023  润新知