时间戳

首页 > 解决方案 > 如何在 React 中减少引导程序的表单宽度输入

css - 如何在 React 中减少引导程序的表单宽度输入

问题描述

我正在研究 react.js 并导入了引导登录表单。挑战在于，默认情况下，它占据了整个网页的宽度，我希望它减少到大约 30rem 宽度的空间。代码如下所示：

<div>
  <h1> Login </h1>
  <form onSubmit={this.handleSubmit}>
    {this.renderInput("username", "Username")}
    {this.renderInput("password", "Password", "password")}
    {this.renderButton("Login")}
  </form>
</div>

标签： cssreactjsreact-bootstrap

解决方案

我得到了解决方案，如下所示：

有两种方法可以实现这一点。首先是将 CSS 样式直接嵌入到表单中，如下所示：

<div>
  <h1> Login </h1>
  <form onSubmit={this.handleSubmit} style={{ width: "30rem" }}>
    {this.renderInput("username", "Username")}
    {this.renderInput("password", "Password", "password")}
    {this.renderButton("Login")}
  </form>
</div>

第二种方法是直接在 index.css 中设置样式（注意你必须在 src 下获取 index.css）：

索引.css：

.formWidth {
  width: 30rem;
}

然后使用 className 在您的表单中调用它，如下所示：

loginForm.jsx：

<div>
  <h1> Login </h1>
  <form onSubmit={this.handleSubmit} className="formWidth">
    {this.renderInput("username", "Username")}
    {this.renderInput("password", "Password", "password")}
    {this.renderButton("Login")}
  </form>
</div>

推荐阅读