使用 react-bootstrap 调整徽标/图像和表单的大小？答案

【问题标题】：Resize logo/image and Form using react-bootstrap?使用 react-bootstrap 调整徽标/图像和表单的大小？
【发布时间】：2021-12-31 18:29:10
【问题描述】：

目前我的proto-type 网站是这样的：

这是我的整个窗口。我想让徽标更小并缩小+居中文件上传表单（即不让它边到边）。我正在使用 React 和 React-bootstrap。目前我的渲染看起来像这样：

return (
            <>
                <div className='App'>
                    <link
                        rel="stylesheet"
                        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
                        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
                        crossorigin="anonymous"
                    />
                    <link
                        rel="stylesheet"
                        href="./App.css"
                    />
                    <header className='App-header'>
                        <img src={logo} className='App-logo' alt='logo' />
                    </header>
                    
                    <div id='Main'>
                        {this.state.statusElement}
                        <Form.Group controlId="formFile" className="mb-3" onChange={this.onFileChange.bind(this)} required>
                            <Form.Label>Test Data</Form.Label>
                            <Form.Control type="file" />
                        </Form.Group>
                        <Button variant="outline-primary" onClick={this.onSubmit.bind(this)} >Upload</Button>{' '}
                    </div>
                </div>
            </>
        );

我的自定义 CSS 文件如下所示：

.App-logo {
height: 1vmin;
pointer-events: none;
}


@media (prefers-reduced-motion: no-preference) {
.App-logo {
  animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
/* background-color: #282c34;
min-height: 100vh; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
/* color: white; */
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}

.form-inline {
  width: 100;
}

我尝试更改 .App-header 和 .App-logo 但这似乎不起作用。如果有人能给我一些指点，那真的很有帮助！

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

我认为您需要在 CSS 中为 .App-logo 使用 width 属性

或者，或者，您可以立即在 img 元素本身上设置 width 和 height。

<img ..... width="150"/>

这将使用 150px 和自动高度。

【讨论】：

似乎不起作用？当我尝试这个时仍然是相同的尺寸。