我目前正在使用Bootstrap的卡
根据文字标题，我会得到不同的卡片高度，并希望与最高的卡片具有相同的高度。
我不介意使用JS我实际上认为这可能是解决问题的最佳方式。
我尝试过使用CSS中的不同解决方案，比如使用flexbox
渲染的HTML动态渲染，这是一个简单的例子：
.card {
float: left;
width: 100%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
.card > img {
margin-bottom: .75rem;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.card-text {
font-size: 85%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SMITE FR</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/album.css" rel="stylesheet">
<link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<link rel="import" href="navigation.html">
</head>
<body>
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 col-sm-6 col-12"><div class="card">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
<a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div></div><div class="col-md-4 col-sm-6 col-12"><div class="card">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
<a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div></div><div class="col-md-4 col-sm-6 col-12"><div class="card">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
<a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div></div> </div>
</div>
</div>
</body>
</html>
答案 0 :(得分：4)
Bootstrap 4列已使用flexbox，因此 相同高度。只需使用 clevertap = CleverTap("idxxxx", "passcodexxxx")
query = {
"event_name": "abc",
"from": 20170505,
"to": 20170609
}
result = clevertap.events(query)
info = pd.read_json(json.dumps(result))
表示身高：100％在卡片上，它们就会填满这些栏目......
https://www.codeply.com/go/hKhPuxoovH
h-100此外没有理由浮动卡片，<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
<a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
<a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
<a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div>
</div>
</div>
</div>
应该直接在.col-*，而不是.row
答案 1 :(得分：0)
据我所知，没有javascript或flexbox（https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback）
，这是不可行的答案 2 :(得分：0)
使用var async = require('async');
var oracledb = require('oracledb');
var dbConfig = require('../utility/dbconfig.js');
var response = require('../utility/response.js');
var bodyParser = require('body-parser');
var express = require('express');
var router = express.Router();
router.use(bodyParser.json());
var dbdata='';
var app = express();
var oracledb = require('oracledb');
var dbConfig = require('../utility/dbconfig.js');
var doconnect = function(cb) {
oracledb.getConnection(
{
user : dbConfig.user,
password : dbConfig.password,
connectString : dbConfig.connectString
},
cb);
console.log('Connection was successful!');
};
var dorelease = function(conn) {
conn.close(function (err) {
if (err)
console.error(err.message);
});
console.log('Connection closed successfully!');
};
// Optional Object Output Format
var doquery_object = function (conn, cb) {
conn.execute(
"SELECT d.dc_name,c.cobrand_name,c.cobrand_id,c.IS_CACHERUN_DISABLED,c.is_channel,c.environment,c.COBRAND_STATUS_ID,c.deployment_mode,c.db_name,c.gatherer_group FROM cobrand_master c,dc_master d where d.dc_id = c.dc_id ORDER BY c.display_priority",
{},
{ outFormat: oracledb.OBJECT },
function(err, result)
{
if (err) {
return cb(err, conn);
} else {
console.log("----- cobrand_master details (OBJECT output format) --------");
console.log(result.rows);
return cb(null, conn);
}
});
};
async.waterfall(
[
doconnect,
doquery_object
],
function (err, conn) {
if (err) { console.error("In waterfall error cb: ==>", err, "<=="); }
if (conn)
dorelease(conn);
});
获取示例
flex .main {
display: flex;
}
.child {
flex:1;
border:1px solid tomato;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column nowrap;
}
.content-child{
padding: 5px;
}
答案 3 :(得分：0)
使用Flexbox你获得了相同的卡片高度
.card-deck {
display:flex;
flex-wrap: wrap;
}
.card {
float: left;
width: 100%;
height:100%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
.card > img {
margin-bottom: .75rem;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.card-text {
font-size: 85%;
}
@media (max-width:767px){
.card-deck {
display:block;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
<a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
<a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
<a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
</div>
</div>
</div>
</div>
</div>
</div>
答案 4 :(得分：0)
尝试为卡片提供高度，请参阅此fiddle
.card {
float: left;
width: 100%;
padding: .75rem;
height:80vh;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
答案 5 :(得分：0)
将卡片组用于同等大小的卡片，下面的代码对我有用
<div class="card-deck">
<div class="card mb-2">
<img class="card-img-top img-fluid" src="//placehold.it/500x180" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-2">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>