如何创建此输入字段响应

Question

我是网页设计新手。请帮助我创建响应式输入字段，以及我如何将边距放在中间（我希望将这些列放在页面中间）。

<!DOCTYPE html>
<html>
<head>
    <title>Login/Registor</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0;
            overflow-x: hidden!important;
        }
        .containor{
            /*text-align: center;*/
            margin:225px 3px 5px 3px auto;

        }
        .form-group input{
            width: 900px;
            height: 40px;
            border-color: silver;
            padding: 0;
            margin-top: 3px;
            margin-bottom: 10px;
        }
        .form-group label{
            text-align: left;
            padding-left: 3px;
            margin-bottom: 3px;
        }
        .buttons{
            margin-top: 20px;
        }


    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="containor">
        <div class="row">
            <div class="col-6 col-sm-12 col-md-6 border" id="login_section">
                <form class="m-3" action="#" method="post">
                    <div class="form-group">
                        <h1 class="m-3 text-center">Welcome to Login Section!</h1>
                        <label>Email</label>
                        <input type="text" class="form-control" name="u_email">
                        <label>Password</label>
                        <input type="password" class="form-control" name="paswd">
                        <br>
                        <div class="buttons">
                            <button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
                            <button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
                            <a href="#">Fogot password!</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
                <form class="m-3" action="#" method="post">
                    <div class="form-group">
                        <h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
                        <label>Email</label>
                        <input type="text" class="form-control" name="u_email">
                        <label>Password</label>
                        <input type="password" class="form-control" name="paswd">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control" name="confirm_paswd">
                        <br>
                        <div class="buttons">
                            <button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
                            <button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

如果任何人有使用 html、css 创建的此类样本，请分享 bootsrap 以获得更多关于这些东西的想法。谢谢

Answer 1

这是您要找的吗？

如果然后添加以下样式来修复输入移出容器的问题。

.form-group input {
  width: 900px;
  max-width: 100%;
}

工作Fiddle

body {
  margin: 0px;
  padding: 0;
  overflow-x: hidden !important;
}

.containor {
  /*text-align: center;*/
  margin: 225px 3px 5px 3px auto;

}

.form-group input {
  width: 900px;
  height: 40px;
  border-color: silver;
  padding: 0;
  margin-top: 3px;
  margin-bottom: 10px;
  max-width: 100%;
}

.form-group label {
  text-align: left;
  padding-left: 3px;
  margin-bottom: 3px;
}

.buttons {
  margin-top: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <body>
  <div class="containor">
    <div class="row">
      <div class="col-6 col-sm-12 col-md-6 border" id="login_section">
        <form class="m-3" action="#" method="post">
          <div class="form-group">
            <h1 class="m-3 text-center">Welcome to Login Section!</h1>
            <label>Email</label>
            <input type="text" class="form-control" name="u_email">
            <label>Password</label>
            <input type="password" class="form-control" name="paswd">
            <br>
            <div class="buttons">
              <button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
              <button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
              <a href="#">Fogot password!</a>
            </div>
          </div>
        </form>
      </div>
      <div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
        <form class="m-3" action="#" method="post">
          <div class="form-group">
            <h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
            <label>Email</label>
            <input type="text" class="form-control" name="u_email">
            <label>Password</label>
            <input type="password" class="form-control" name="paswd">
            <label>Confirm Password</label>
            <input type="password" class="form-control" name="confirm_paswd">
            <br>
            <div class="buttons">
              <button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
              <button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

如何创建此输入字段响应

How to create this input fields responsive

html

css

bootstrap-4