【发布时间】：2021-10-13 14:52:14
【问题描述】：
所以，这就是我的困境
这是我的卡片目前的样子：
这看起来一切都很好，但是，当你改变屏幕尺寸时，它就是这样的：
这不是很好，因为我们希望引导应用程序，以及现在任何网站都能够响应。
我想要的是让卡片水平拉伸，这样无论我们的显示器宽度是多少，卡片都会填满整个卡片组——也就是标题为“仪器列表”的底部部分
现在，如果我放了
style={{flexGrow: 1}}
在每张卡片上，然后它似乎有点工作，但是，并没有像我真正想要的那样工作。
如果我有一排卡片不包含 5 张卡片，它会将它们拉长：
我只想让我的卡片组伸展以填满整个容器，但我也希望它保持我卡片的标准尺寸
这是我的 Card Deck 代码，它从 JSON 文件和 Card 项目生成仪器。
列表代码：
import InstrumentCard from './InstrumentCard'
import styles from '../styles/InstrumentList.module.scss'
import {CardDeck} from 'react-bootstrap'
const InstrumentList = ({instruments, onDel, onLoc, onShuf, onRep, onRepButClick, setRepInstrumentID}) => {
return (
<CardDeck key={1} className={styles.container} style={{display: 'flex', flexDirection: 'row'}}>
{instruments.map((instrument, i) => (
<InstrumentCard
key={i}
id={i}
instr = {instrument}
name={instrument.name}
description={instrument.description}
imagePath={instrument.image}
wikiLink={instrument.wikipedia}
tubeLink={instrument.youtube}
onDelete = {onDel}
isLocked = {instrument.locked}
onLock = {onLoc}
onShuffle = {onShuf}
onReplace = {onRep}
onRepButtonClick = {onRepButClick}
setReplacementInstrumentID = {setRepInstrumentID}
style={{flex: 1}}>
</InstrumentCard>
)) }
</CardDeck>
)
}
export default InstrumentList
卡号：
import {Card, Button, ButtonGroup, ButtonToolbar} from 'react-bootstrap'
import styles from '../styles/InstrumentCard.module.scss'
import {useState} from 'react'
const InstrumentCard = ({id, name, description, imagePath, wikiLink, tubeLink, onDelete, isLocked, onLock, onShuffle, setReplacementInstrumentID, onRepButtonClick}) => {
return (
<Card style={{ minWidth: '18rem', flexGrow: 1, margin:'1rem', minHeight:'32rem'}}>
<div>
<button id="lockButton" onClick={() => {onLock(id)}} className={isLocked ? styles.btnOverrideLocked : styles.btnOverride}>{isLocked ? "????" : "????"}</button>
<button id="shuffleButton" autoFocus={true} onClick={()=> {onShuffle(id)}} className={styles.btnOverrideShuffle} style={{float: "right"}}><span>????</span></button>
</div>
<Card.Img variant="top" src={imagePath} style={{padding:'1rem', maxHeight: '10rem', height:'100%', objectFit: 'contain'}} />
<Card.Body style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
<div>
<Card.Title>{name}</Card.Title>
<Card.Text>
{description}
</Card.Text>
</div>
<div style={{marginTop: '.5rem'}}>
<ButtonGroup style={{width: "100%"}}>
<Button variant="danger" onClick={()=> onDelete(id)}>Delete</Button>
<Button variant="secondary" onClick={()=> {setReplacementInstrumentID(id); onRepButtonClick()}} >Replace</Button>
</ButtonGroup>
</div>
</Card.Body>
<Card.Footer>
<Card.Link target="_blank" rel="noopener noreferrer" href={wikiLink}>Wikipedia</Card.Link>
<Card.Link target="_blank" rel="noopener noreferrer" href={tubeLink}>Youtube</Card.Link>
</Card.Footer>
</Card>
)
}
export default InstrumentCard
非常感谢任何帮助或解释！提前谢谢！
编辑：我尝试过但失败的事情是使用 map 并创建一个变量“让 newIndex = (i*5) 并尝试像 newIndex + 1 一样使用来获取其他索引，并尝试在一个内生成 5 个引导列但是，这不起作用，至少对于 map 功能，因为除了其他问题之外，没有办法阻止 map 超出仪器的实际数量。
我也尝试为我的卡片添加最大宽度和高度，但是，这仍然允许它们按行增长和缩小，这是我们不希望的
我觉得某种引导程序 Col 和 Row 生成会很理想，但我不知道如何在 return 语句中使用 javascript 让它每行只生成 5 个元素。
【问题讨论】：
标签： reactjs bootstrap-4 next.js react-bootstrap