时间戳

首页 > 解决方案 > 如何在 reactjs 中设置引导程序以响应？

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

问题描述

我对反应引导程序中的“卡”有疑问。关键是，他们没有反应。通过调整浏览器窗口的大小，它们仍然都在一条线上，看起来很难看。我不知道我是否对 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 aby zobaczyć komenarze”）放大一个元素时，其他元素也会被放大。

标签： reactjsbootstrap-4react-bootstrap

解决方案

您必须将卡片包装在 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

推荐阅读