javascript - 如何将 ReactJS-bootstrap 表单和 h1 标签并排放置
问题描述
我想将我的 FormGroup 和我的 h1 标签水平并排放置。我试过使用 display: inline-block 和其他各种东西,但没有运气。这是我的 .css 代码:
.testingForm {
max-width: 320px;
}
.testingMore {
text-align: left;
float: right;
}
这是 .js 代码:
<div className="testingForm">
<FormGroup
controlId="stuff"
bsSize="large"
>
<ControlLabel>Stuff</ControlLabel>
<FormControl
/>
</FormGroup>
</div>
<div className="testingMore">
<h1>Additional Stuff</h1>
</div>
解决方案
您可以创建一个包含表单和标题的元素,并将其放入flex
容器中display:flex;
.form-wrapper {
display: flex;
}
.testingForm {
max-width: 320px;
}
h1 {
margin-top: 0;
}
<div class="form-wrapper">
<div className="testingForm">
<form>
Test: <input type="text"/>
</form>
</div>
<div>
<h1>Additional Stuff</h1>
</div>
</div>
推荐阅读
- python - 如何从值列表中找到中位数
- java - java OutOfMemoryException 创建新线程时,仅当活动线程数为 500 或以上时
- flutter - 找不到 com.google.android.gms:play-src.services-maps:17.0.0
- spring - axios 发布成功,但在 spring-controller 中没有触发任何方法
- visual-studio-code - Mac 上的 VSCode 和 Oh My Zsh - 如何在终端打开时自动运行命令?
- javascript - 为什么 Node.js 中的 util.inherits() 方法使用 Object.setPrototypeOf()?
- node.js - 如何使用 dotenv 从 .env 和 .env.local 加载环境变量?
- javascript - 为什么这个 Javascript API 会失败?
- postgresql - PostgreSQL。心跳无法正常工作
- asp.net-core - SmtpClient 发送电子邮件错误“邮箱不可用。服务器响应为:5.7.1 客户端无权作为此发件人发送”