css - 表单向上移动并与导航栏重叠

Question

我的表单在较小的屏幕和桌面屏幕中向上移动并与导航栏重叠。我似乎无法弄清楚。下面是html和css

HTML

<div class="container-fluid h-100 d-flex flex-column">
        <nav class="navbar navbar-light fixed-top">
    <a class="navbar-brand" href="#">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
    </a>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Updates</a>
      </li>
    </ul>
  </nav>
  <div class="row align-items-center flex-grow-1">
      <div class="col-6 mx-auto">
          <div class="custom-form mb-0">
             <form action="">
          <fieldset class="form-group">
            <label for="first_name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </fieldset>
          <fieldset class="form-group">
            <label for="last_name">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <button type="submit" class="btn btn-submit">Subscribe</button>    
          </fieldset>                                                 
        </form>
          </div>
      </div>
  </div>

   <footer class="mt-auto">
    <p class="float-left">2018 © Palungo</p>
      <div class="float-right">
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">News</a></li>
          <li class="list-inline-item"><a href="#">Coles</a></li>
        </ul>
      </div>
  </footer>

</div>

CSS

    body,html {
     height: 100%;
     background:#333A4D;
    }
  .navbar{
    padding: 10px;
    background: #F3B0B6;
  }
  .nav-link{
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
  }
  .nav-item { margin-left: 1rem; }
  .list-inline-item{ margin-left: 1rem; }
  .jumbotron{ background: none; }
  .text-border{
    display: block;
    height: 1px;
    border: 0;
    border-top: 4px solid #F3B0B6;
  }
  .lead{
    text-transform: uppercase;
    color: #F3B0B6;
    font-size: 25px;
    line-height: 31px;
  }
  .custom-form-container{margin-top: 5rem;}
  .custom-form{
      background: green;
      padding: 60px 82px 60px 82px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 3px 6px -4px #000000; 
      box-shadow: 0px 3px 6px -4px #000000;
  }
    .custom-form label{
      font-size: 25px;
      line-height: 32px;
      color: #F3B0B6;
      margin-left: 1rem;
   }
  .custom-form .btn{
    float: right;
    margin-top: 3rem;
    margin-right: -3rem;
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
    background: none;
  }
  .custom-form .form-control{
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.1);
  }

这是我的问题的截图： http: //prntscr.com/kkkyto 我想知道是否有更好的方法来实现这一点： http: //prntscr.com/kkkz4y

我还包括了 codepen.io 链接。希望能帮助到你

CodePenLink

标签： csshtmlbootstrap-4

Answer 1

您可以向包含所有表单标签的 div 元素添加一个类，然后在 CSS 中添加一个带有一定间距的 margin-top 选择器将其向下推，如下所示：

body,
html {
  height: 100%;
  background: #333A4D;
}

.MAIN-FORM {
  margin-top: 10rem;
}

.navbar {
  padding: 10px;
  background: #F3B0B6;
}

.nav-link {
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
}

.nav-item {
  margin-left: 1rem;
}

.list-inline-item {
  margin-left: 1rem;
}

.jumbotron {
  background: none;
}

.text-border {
  display: block;
  height: 1px;
  border: 0;
  border-top: 4px solid #F3B0B6;
}

.lead {
  text-transform: uppercase;
  color: #F3B0B6;
  font-size: 25px;
  line-height: 31px;
}

.custom-form-container {
  margin-top: 5rem;
}

.custom-form {
  background: green;
  padding: 60px 82px 60px 82px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 6px -4px #000000;
  box-shadow: 0px 3px 6px -4px #000000;
}

.custom-form label {
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
  margin-left: 1rem;
}

.custom-form .btn {
  float: right;
  margin-top: 3rem;
  margin-right: -3rem;
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
  background: none;
}

.custom-form .form-control {
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.1);
}

<div class="container-fluid h-100 d-flex flex-column">
  <nav class="navbar navbar-light fixed-top">
    <a class="navbar-brand" href="#">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
    </a>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Updates</a>
      </li>
    </ul>
  </nav>
  <div class="MAIN-FORM row align-items-center flex-grow-1">
    <div class="col-6 mx-auto">
      <div class="custom-form mb-0">
        <form action="">
          <fieldset class="form-group">
            <label for="first_name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </fieldset>
          <fieldset class="form-group">
            <label for="last_name">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <button type="submit" class="btn btn-submit">Subscribe</button>
          </fieldset>
        </form>
      </div>
    </div>
  </div>

  <footer class="mt-auto">
    <p class="float-left">2018 © Palungo</p>
    <div class="float-right">
      <ul class="list-inline">
        <li class="list-inline-item"><a href="#">News</a></li>
        <li class="list-inline-item"><a href="#">Coles</a></li>
      </ul>
    </div>
  </footer>

</div>