responsive-auto-height bootstrap响应式等高卡片效果代码-html代码-BFW代码库

responsive-auto-height bootstrap响应式等高卡片效果代码

代码语言：html

所属分类：响应式

代码描述：responsive-auto-height bootstrap响应式等高卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <!-- Bootstrap core CSS -->
 <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <!-- Custom styles for this template -->
    <style>
        :root {
    	--jumbotron-padding-y:3rem
    }
    .jumbotron {
    	padding-top:var(--jumbotron-padding-y);
    	padding-bottom:var(--jumbotron-padding-y);
    	margin-bottom:0;
    	background-color:#fff
    }
    @media(min-width:768px) {
    	.jumbotron {
    	padding-top:calc(var(--jumbotron-padding-y) * 2);
    	padding-bottom:calc(var(--jumbotron-padding-y) * 2)
    }
    }.jumbotron p:last-child {
    	margin-bottom:0
    }
    .jumbotron-heading {
    	font-weight:300
    }
    .jumbotron .container {
    	max-width:40rem
    }
    footer {
    	padding-top:3rem;
    	padding-bottom:3rem
    }
    footer p {
    	margin-bottom:.25rem
    }
    .box-shadow {
    	box-shadow:0 .25rem .75rem rgba(0,0,0,.05)
    }
    </style>
</head>

<body>
    <main role="main">
        <div class="album py-5 bg-light">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-4 box-shadow js-align-height"><img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%.........完整代码请登录后点击上方下载按钮下载查看