Question

我正在尝试使用在react-bootstrap.github.io找到的代码向登录页面添加复选框

我遇到的问题是复选框与标签重叠。

我的代码（register.js）在下面

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import { request } from './services/Request';
import { Button, FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
//import { FormRow } from 'react-bootstrap/Form';
import "./Styles/register.css"

export const Register = () => {

    return (
        <div style={{display: "flex", justifyContent: "center"}}> 
        <h1> Register </h1>
            <div className="Register">
                <form onSubmit={handleSubmit}>

                    </FormGroup>
                    <FormGroup controlId="email" bsSize="large">
                    <FormLabel>Email</FormLabel>
                    <FormControl
                        required
                        autoFocus
                        type="email"
                        //value={email}
                        onChange={ onChangeHandlerFn }
                    />
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                    <FormLabel>Password</FormLabel>
                    <FormControl 
                        required
                        autoFocus
                        type="password"
                        //value={password}
                        onChange={ onChangeHandlerFn }
                    />
                    </FormGroup>

                    <FormGroup controlId="password" bsSize="large">


                    {['checkbox'].map((type) => (
                        <div key={`default-${type}`} className="mb-3">
                          <FormCheck 
                            type={type}
                            id={`default-${type}`}
                            label={`I am an individual`}
                          />
                        </div>
                    ))}
                    <Button variant="primary" type="submit" block>Register</Button>

                    <span>
                        Have an account? 
                        <a href="/login"> Sign in</a>
                    </span>
                    <ul>
                        <li><Link to="/privacy">Privacy & Terms</Link></li>
                    </ul>
                </form>
            </div>
        </div>
    );

};

问题是复选框重叠了它们的标签：

这是我的CSS：

@media all and (min-width: 480px) {
    .Register {
      padding: 60px 0;
    }

    .Register form {
      margin: 0 auto;
      max-width: 320px;
    }
  }

 ul {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;

  }

一切工作，出于篇幅考虑，我确实发布了所有代码。

任何帮助将不胜感激。

Answer 1

如何添加标签的左侧填充以清除复选框？

test <- df %>% 
  model(ARIMA(Turnover ~ reg_test + reg_test2))
test$`ARIMA(Turnover ~ reg_test + reg_test2)`[[1]]

Series: Turnover 
Model: LM w/ ARIMA(2,1,0)(0,1,2)[12] errors 

Coefficients:
          ar1      ar2     sma1     sma2  reg_test  reg_test2
      -0.6472  -0.3541  -0.4115  -0.0793   -0.0296    -0.6143
s.e.   0.0473   0.0479   0.0520   0.0446    0.5045     0.5273

sigma^2 estimated as 884.9:  log likelihood=-2058.04
AIC=4130.08   AICc=4130.35   BIC=4158.5

复选框重叠复选框标签

1 个答案: