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>
点赞
评论