如何在 React Boostrap 中更改手风琴折叠方向？

Question

我正在尝试改变 react-bootstrap 中手风琴元素移动方式的方向。目前它向下移动。有没有一种简单的方法可以让它向上打开？

下面是我的一个组件的示例。我希望能够向上而不是向下打开它，原因是我将它放在屏幕底部，所以当我在默认设置下打开它时，它会向下而不是向上：

import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const InfoBox = ( props ) => {

    const Styles = {
        width: "100%",
        marginTop: "147%"
    }

    return (
        <div style={Styles}>
        <Accordion>
            <Card>
            <Card.Header>
                <Accordion.Toggle as={Button} variant="link" eventKey="0">
                    Link Info
                </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body>
                <div>{`Link Address: ${props.sa}`}</div>
                <div>{`community board: ${props.cb}`}</div>
                <div>{`lat: ${props.lat}`}</div>
                <div>{`lon: ${props.lon}`}</div>
                </Card.Body>
            </Accordion.Collapse>
            </Card>    
        </Accordion>
        </div>
    )
};

export default InfoBox;

Answer 1

向上移动手风琴可以通过简单的 CSS 更改来实现。

我们可以用 classname 反转 div 的 flex-direction .card。默认情况下flex-direction是column。我们可以覆盖它并使之成为column-reverse。

.card bootstrap 提供的默认样式

.card { 
    display: flex;
    flex-direction: column;
}

通过在项目中以更高的优先级添加 css 样式来更改 flex 方向。像这样 -

.my-footer .card {
    flex-direction: column-reverse;
}

这是相同的代码和框解决方案 - https://codesandbox.io/s/distracted-fog-nxb6n?file=/src/styles.css

更多解释 - 当 react-bootstrap 渲染手风琴时，它添加了这个 DOM 结构 -

<div class="accordion">
  <div class="card">
    <div class="card-header">
      ...
    </div>
    <div class="collapse" style="">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
</div>

通过给flex-direction为column-reverse我们交换的流程.card-header和.collapse元素。

如果这有帮助，请告诉我。