React 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>