如何在reactjs中设置引导程序以进行响应？

如何解决如何在reactjs中设置引导程序以进行响应？

我对react bootstrap中的“卡片”有疑问。关键是，他们没有反应。 通过调整浏览器窗口的大小，它们仍然处于同一行，这看起来很丑。 我不知道CardGroup是否做错了什么。可以通过其他方式获得相似的效果吗？ 可读性好！

<Accordion defaultActiveKey={0}>
            <CardGroup className="card-deck text-center">
                {allPost[0].post.map((item,i) =>
                    <Card key={i} bg='dark' text='white' >                      
                        <Card.Body>
                            <Card.Title>{item.title}</Card.Title>
                            <Card.Subtitle className="mb-3 text-muted">
                                {item.data} - {item.displayName}
                            </Card.Subtitle>
                            <Card.Text>
                                {item.text}  
                            </Card.Text>
                            <Card.Footer >
                                {(item.comments.length>0)?( //if there are any comments                             
                                <>
                                    <Accordion.Toggle as={Button} variant="btn btn-outline-light mx-auto" eventKey={item} > 
                                        {/* Click here to see comments */}
                                            Kliknij aby zobaczyć komenarze 
                                    </Accordion.Toggle>
                                    <Accordion.Collapse eventKey={item}>
                                        <>
                                            {
                                                item.comments.map((com,is) => 
                                                    <Card key={is} bg='dark' text='white' >
                                                            <Card.Body>
                                                                <Card.Subtitle className="mb-3 text-muted">
                                                                    {com.displayName} {com.data}
                                                                </Card.Subtitle>
                                                                <Card.Text>
                                                                    {com.text} 
                                                                </Card.Text>
                                                            </Card.Body>       
                                                        </Card>
                                                    )
                                            }
                                        </>         
                                    </Accordion.Collapse>
                                </> 
                                ):(
                                <>
                                    <Card bg='dark' text='white'>
                                        {/* Add a comments - soon*/}
                                        Dodaj komenarz
                                    </Card>
                                </>    
                                )}
                            </Card.Footer>           
                        </Card.Body>     
                    </Card>
                )}
            </CardGroup>
        </Accordion>

照片： 1

2

3

在第三张图片上，您可以看到，通过显示注释来放大一个元素（“ Kliknij abyzobaczyćkomenarze”），其他元素也会被放大。

解决方法

确保对卡元素具有导入声明以“ react-bootstrap”。导入卡时，您应该获得所有响应功能。确保您要导入手风琴，CardGroup，Card等。

,

您必须将卡包装在Row标签内。将网格应用于行，这样它们就会响应。原始的html看起来像这样。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

官方文档为https://getbootstrap.com/docs/4.0/components/card/#using-grid-markup