css - Bootstrap:在元素之间分配空格
问题描述
在下图中,您可以看到子元素没有填充父元素(红色部分是空白区域)。我尝试display: 'flex'
在父母和孩子中使用alignItems: 'space-between'
,alignItems: 'left'
但无法实现我想要的。
我的代码:
import { Link } from 'react-router-dom'
export default function Election({ election }) {
return (
<div>
<h1>{election.name}</h1>
<div style={{background: '#892650', display: 'flex'}}>
{
election.candidates.map((candidate, i) => {
return (
<Link to='candidate-info'>
<div className="card" style={{width: '18rem', maxHeight: '600px', alignItems: 'space-between'}}>
<img src="/uploads/profile.jpeg" className="card-img-top" alt="..."/>
<div className ="card-body">
<h5 className ="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
<p className ="card-text">{candidate.motto}</p>
</div>
<div className ="card-body">
<button className ="card-link">Card link</button>
<button className ="card-link">Another link</button>
</div>
</div>
</Link>)
})
}
</div>
</div>
)
}
欢迎进行任何更改以使其正常工作。(PS引导方式解决方案更可取)
解决方案
space-between
应该在justify-content
并且align-items
应该是center
。试试这个:
<h1>{election.name}</h1>
<div style={{background: '#892650', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
推荐阅读
- javascript - 使用动态生成的值更新数组
- javascript - 我可以仅使用 wordpress elementor 创建带有图像和描述的团队成员滑块吗?
- excel - 自动从具有相似名称的其他工作簿中的特定工作簿中获取数据
- satellite - 我可以在谷歌引擎地图上放大吗
- java - 在 quarkus 测试容器中手动运行 flyway 反应式
- shell - 如何在 shell 脚本中使用 count 打印不同的错误
- python - Django根据另一个表中的值过滤表中的数据?
- airflow-scheduler - 气流任务正在运行但计划上升 - MWAA
- node.js - 使用加密和节点解密时捕获错误
- java - Android Studio:自定义相机预览不会显示