Bootstrap：在元素之间分配空白space

Question

在下图中您可以看到 children 没有填充 parent 元素（红色部分是空白 space）。我尝试在 parent 和 alignItems: 'space-between' 中使用 display: 'flex'，在 children 中使用 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>
  )
}

欢迎为使其正常工作而进行的任何更改。 (P.S.bootstrap-way解更可取)

Answer 1

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

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

Bootstrap：在元素之间分配空白space

Bootstrap: distribute blank space between elements

css

responsive-design

twitter-bootstrap

reactjs