React Bootstrap：减少表单输入的宽度

由 发布于 reactjsreact-bootstrap
 收藏

作为React.js的初学者，每次尝试减小引导程序形式的宽度（下面的代码）都是失败的。我尝试使用Google搜索，并检查堆栈是否溢出，但没有得到我需要的确切答案。

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

    经过艰苦的努力，我后来得到了解决方案，我想在下面为React新手放弃答案，只是为了让他们避免我经历的艰辛。

    有两种方法可以实现此目的。 首先是将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）：

    index.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>