Question

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

HTML

df["Region"] = pd.np.where(df["City name"].isin(N), "North", 
                   pd.np.where(df["City name"].isin(S), "South", 
                       pd.np.where(df["City name"].isin(W), "West", np.nan)))

CSS

<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>

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

我还包括了codepen.io链接。希望对您有帮助

CodePenLink

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>

Answer 2

首先使用margin-top分隔符将div向下推。

body,html {
  height: 100%;
  background:#333A4D;
}
.navbar{
  padding: 10px;
  background: #F3B0B6;
  height: 60px;
}
.row.align-items-center.flex-grow-1 {
    display: block;
    margin-top: 60px;
}
.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);
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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-md-6 col-sm-12 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>

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

2 个答案: