Bootstrap：在元素之间分配空格

Posted 2023-03-06

【中文标题】Bootstrap：在元素之间分配空格

【英文标题】：Bootstrap: distribute blank space between elements

【发布时间】：2021-12-15 18:27:22

【问题描述】：

在下图中你可以看到子元素没有填充父元素（红色部分是空白区域）。我尝试在父级中使用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" />
                  <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>
  )

欢迎进行任何更改以使其正常工作。 （P.S. bootstrap-way 解决方案更可取）

【参考方案1】：

space-between 应该是 justify-content 和 align-items 应该是 center。试试这个：

<h1>election.name</h1>
<div style=background: '#892650', display: 'flex', justifyContent: 'space-between', alignItems: 'center'>