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%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_163cdb5ec6a%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_163cdb5ec6a%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                                alt="Card image cap">
                            <div class="card-body">
                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary">View</button><button type="button".........完整代码请登录后点击上方下载按钮下载查看