元素样式未正确设置为正确的响应式引导程序答案

【问题标题】：elements not styling properly to the right responsive bootstrap元素样式未正确设置为正确的响应式引导程序
【发布时间】：2020-06-10 13:20:57
【问题描述】：

简要介绍一下我的代码，我有一个代码可以从数组中获取数据，映射到它们，然后像这样显示卡片：

我编写了代码，因此它们使用 justify content:flex-end 固定在右侧，并且工作正常，但是如果我从数据中删除了一个元素，则会发生这种情况：

所以你可以看到它们不再是正确的，我怎样才能让它响应，无论我有多少数据，它总是是 flex-end 的？

code.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>
)}

【问题讨论】：

如何删除元素进行测量？
@buzatto 我编辑了代码并添加了测量数据，例如我可以从中删除一行

标签： reactjs bootstrap-4 styling

【解决方案1】：

您必须将flex-end css 应用于.row，而不是.container。

.row div 是一个块，因此它将是 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

【讨论】：