Bootstrap - 在页面顶部放置导航栏，然后将表单居中

Question

我有这个页面是使用 Bootstrap 构建的（图片）。有没有什么方法可以在页面顶部有一个导航栏，上面有一个徽标和几个链接，如关于我们、安全、登录、注册，然后将登录表单居中在页面中间并让页面正常工作在任何屏幕设备中正确吗？谢谢你的帮助

登录.js

<div className="Login">
  <Form onSubmit={handleSubmit}>
    <h2>Login</h2>
    <Form.Group size="lg" controlId="email">
      <Form.Control
        autoFocus
        type="email"
        value={email}
        placeholder="Please enter your email"
        onChange={(e) => setEmail(e.target.value)}
      />
    </Form.Group>
    <Form.Group size="lg" controlId="password">
      <Form.Control
        type="password"
        value={password}
        placeholder="Please enter your password"
        onChange={(e) => setPassword(e.target.value)}
      />
    </Form.Group>
    <a href="forget.html" className="forgot-password">
      Forgot Password?
    </a>
    <Button block size="lg" type="submit" disabled={!validateForm()}>
      Sign In
    </Button>
    <Button block size="lg" type="submit">
      Sign Up
    </Button>
  </Form>
</div>

登录.css

body {
font-family: 'Montserrat', sans-serif;
background: url("https://cdn.glitch.com/f0328534-9c08-4f7a-867f-48d6314fffae%2Fchewy-DR6wPYR2DRc-unsplash.jpg?v=1603075265987")
  no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

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

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


}
  
  Form {
    border: 1px solid white;
    background-color: white;
    padding: 24px;
    border-radius: 8px;
}
  
  Form h2 {
    margin-bottom: 24px;
    padding: 4px;
    color: #555555;
    text-align: center;
    font-size: 47px;
    font-weight: bold;
    line-height: 1.2;
  }
  
  .form-control {
    height: 54px;
    border: 2px solid #555555;
    margin-bottom: 21px;
  }
  
  .forgot-password {
    padding: 2px;
  }
  
  .Login button {
    margin-top: 24px;
    background-color: #555555;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    border: 1px solid white;
    border-radius: 8px;
  }
  
  .Login button:hover {
    background: #a64bf4;
    background: -webkit-linear-gradient(45deg, #00dbde, #fc00ff);
    background: -o-linear-gradient(45deg, #00dbde, #fc00ff);
    background: -moz-linear-gradient(45deg, #00dbde, #fc00ff);
    background: linear-gradient(45deg, #00dbde, #fc00ff);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  .Login form label {
    font-size: 18px;
  }

Answer 1

首先，我认为您应该从 body 标记中删除 img。我相信当您将用户重定向到要显示不同内容的不同页面时，此图像仅用于登录页面。 在你的 App.js 中，你的代码应该是这样的：

export default function App() {
  return (
    <>
      <Navbar /> // here you can add your navigation bar component
      <div className="App">
        <Login />
      </div>
    </>
  );
} 

从body标签和App.css中移除你的图片，你的代码应该是这样的：

.App {
  height: calc(100vh - 50px);  // here minus the height of your navbar component, for my case I took 50px
  font-family: sans-serif;
  font-family: "Montserrat", sans-serif;
  background: url("https://cdn.glitch.com/f0328534-9c08-4f7a-867f-48d6314fffae%2Fchewy-DR6wPYR2DRc-unsplash.jpg?v=1603075265987")
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

现在在你的 Login.js 中，一个简单的方法来使图像居中是这样的：

  .Login {
    /* padding: 60px 0; */
    display: grid;
    place-items: center;
    height: 100%;
  }

对于响应式，您必须查看 boostrap 的网格系统，否则您可以使用 media-queries 弄脏您的手。