元素的样式不正确，无法正确响应引导

Question

关于我的代码的一点简要介绍，我有一个代码，它从数组中获取数据，映射在它们上面，然后显示这样的卡片：

我制作了代码，以便它们使用justingcontent：flex-end粘在右侧，并且工作正常，但是如果我从数据中删除一个元素，就会发生这种情况：

因此，正如您所看到的，它们不再向右对齐，我如何才能使其响应方式，无论我有多少数据，它都将始终是弹性端的？

代码.js：

const measurment = [
{ title: "Last Blood Pressure", value: "90/60",unit:"mmhg",subValue:"85 BPM",date:"05/14/2020 04:12",style:{color:'yellow'}},
{ title: "Last Body Weight", value: "154",unit:"lb",subValue:"13% Fat",date:"05/14/2020 04:12"},
{ title: "Last SpO2", value: "98",unit:"%",subValue:"85 BPM",date:"05/14/2020 04:12"},
{ title: "Last Glucose", value: "200",unit:"mg/dl",subValue:"",date:"05/14/2020 04:12",style:{color:'red'}}
]
const style = {
width: "auto",
height:"auto",
}
return(
<div style={{justifyContent:'flex-end'}} className="container">
<div className="row">
{measurment.map(measurment => {
return (
<div style={style} className="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<Card
style={measurment.style}
title={measurment.title}
value={measurment.value}
unit = {measurment.unit}
subValue={measurment.subValue}
date={measurment.date}
/>
</div>
)
})
}
</div>
</div>
)}

Answer 1

你必须将flex-endcss 应用于.row，而不是应用于.container。

.rowdiv 是一个块，因此它将是 100% 的宽度，因此向左或向右对齐不会改变任何事情。

这是一个例子： https://codepen.io/GuillaumeGautier/pen/MWKKXaO

此外，如果您使用的是 Boostrap 4，您可以简化您的卡片类别：

className="col-lg-3 col-md-3 col-sm-12 col-xs-12"

成为

className="col-md-3 col-lg-3"

尺寸col-12