元素没有正确的风格化到正确的响应式bootstrap。

Question

简单介绍一下我的代码，我有一段代码，从一个数组中获取数据，映射到它们上面，然后像这样显示卡片。

我在代码中使用justify content:flex-end让它们贴在右边，工作很好 但如果我从数据中删除一个元素，就会发生这种情况。

所以你可以看到它们不再向右对齐了 我怎么能让它响应的方式，无论我有多少数据，它都会是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-end css对 .row，不对 .container.

的 .row div是一个块，所以它的宽度是100%，所以左右对齐不会有任何改变。

下面是一个例子。https:/codepen.ioGuillaumeGautierpenMWKKXaO。

另外，如果你使用的是Boostrap 4，你可以简化你的卡片类 。

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

成为

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

规模为 col-12