如何使用导航栏在垂直和水平方向上居中登录表单

时间：2018-05-31 16:41:45

标签： html css

我一直试图解决这个问题。我一直在使用bootstrap中的这个模板：https://getbootstrap.com/docs/4.1/examples/sign-in/

但是我试图在它上面添加一个导航栏。框架中的样式被添加到主体上以使其成为中心。我现在遇到的问题是，如果我添加一个导航栏得到中心，因为它也在身体我试图添加自定义类，但到目前为止这对我没有帮助。这就是我迄今为止所拥有的。

形式：

<form class="form-signin" method="post">
            <h1 class="h3 mb-3 font-weight-normal">Vul hier je login 
gegevens</h1>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <button class="btn btn-lg btn-block" 
type="submit">Inloggen</button>
            <p class="mt-5 mb-3 text-muted">&copy; 2018</p>
        </form>

导航：

<nav class="navbar navbar-expand-md navbar-dark" style="background-color:#fe5f55;">
<div class="container">
    <a class="navbar-brand" href="#">Container</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample07">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Login<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>
</nav>

的CSS：

* {

}
html,
body {
height: 100%;
}

body{
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
text-align:center;
}

.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}

.form-signin .checkbox {
font-weight: 400;
}

.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}

.form-signin .form-control:focus {
z-index: 2;
}

.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

button.btn-block {
color:#ffffff;
background-color:#fe5f55;
}

如果有人能帮助我解决这个问题，将不胜感激！

3 个答案:

答案 0 :(得分：1)

您需要在导航栏中添加CSS样式，以下内容应该有所帮助：

 .navbar { 
    position: fixed;
    top: 0;
    width: 100%;
}

这会将导航栏固定在浏览器窗口的顶部 - 宽度由您决定，但我经常会发现导航栏为全宽。希望这可以帮助。如果没有，请提供一个JSFiddle示例，我将在那里查看。

答案 1 :(得分：0)

将flex-direction: column;和align-items: stretch;添加到您的flex容器中，在您的情况下为body：

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  text-align: center;
  flex-direction: column;
  align-items: stretch;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark" style="background-color:#fe5f55;">
  <div class="container">
    <a class="navbar-brand" href="#">Container</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample07">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Login<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<form class="form-signin" method="post">
  <h1 class="h3 mb-3 font-weight-normal">Vul hier je login gegevens
  </h1>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  <button class="btn btn-lg btn-block" type="submit">Inloggen</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2018</p>
</form>

答案 2 :(得分：0)

这是它的工作示例：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .center{
      width: 500px;
      margin:0 auto;
    }
    .height{
      height:100px;
    }
  </style>
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Page 1</a>
        </li>
        <li>
          <a href="#">Page 2</a>
        </li>
        <li>
          <a href="#">Page 3</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="height">

  </div>
  <div class="center">
    <form class="form-signin" method="post">
      <h1 class="h3 mb-3 font-weight-normal">Vul hier je login gegevens
      </h1>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <button class="btn btn-lg btn-block" type="submit">Inloggen</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2018</p>
    </form>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

检查小提琴调整屏幕大小以查看导航栏和表单效果：https://jsfiddle.net/0vu83eru/7/

相关问题
最新问题