调整React Bootstrap中渲染的组件OTPINPUT的大小

发布于 2025-01-18 21:57:32 字数 2309 浏览 0 评论 0原文

这里的验证码不适合框中。有人可以建议吗? 这是我的代码。

期望验证码适合方框,

这里是我的代码:

 <Form.Group className="mb-3" controlId='formBasicVerificationcode'>
                                                      <Form.Label>Enter verification code</Form.Label>
                                                      {/* <Form.Control
                                                        name="verificationcode"
                                                       
                                                       
                                                        required value={values.verificationcode}
                                                        onChange={handleChange} 
                                                        isInvalid={!!errors.verificationcode}
                                                      />
                                                     <Form.Control.Feedback type="invalid">
                                                        {errors.verificationcode}
                                                     </Form.Control.Feedback> */}
                                                        <OtpInput
                                                            inputStyle="inputStyle"
                                                            numInputs={numInputs}
                                                            isDisabled={isDisabled}
                                                            hasErrored={hasErrored}
                                                            errorStyle="error"
                                                            onChange={this.handleEmailOtpChange}
                                                            separator={<span>{separator}</span>}
                                                            isInputNum={false}
                                                            isInputSecure={isInputSecure}
                                                            value={emailotp}
                                                            placeholder={placeholder}
                                                            shouldAutoFocus
                                                        />

here the verification code is not fitting in box.could someone suggest?
here is my code.

expecting that verification code fits in box col

here is my code:

 <Form.Group className="mb-3" controlId='formBasicVerificationcode'>
                                                      <Form.Label>Enter verification code</Form.Label>
                                                      {/* <Form.Control
                                                        name="verificationcode"
                                                       
                                                       
                                                        required value={values.verificationcode}
                                                        onChange={handleChange} 
                                                        isInvalid={!!errors.verificationcode}
                                                      />
                                                     <Form.Control.Feedback type="invalid">
                                                        {errors.verificationcode}
                                                     </Form.Control.Feedback> */}
                                                        <OtpInput
                                                            inputStyle="inputStyle"
                                                            numInputs={numInputs}
                                                            isDisabled={isDisabled}
                                                            hasErrored={hasErrored}
                                                            errorStyle="error"
                                                            onChange={this.handleEmailOtpChange}
                                                            separator={<span>{separator}</span>}
                                                            isInputNum={false}
                                                            isInputSecure={isInputSecure}
                                                            value={emailotp}
                                                            placeholder={placeholder}
                                                            shouldAutoFocus
                                                        />

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文