时间戳

首页 > 解决方案 > 固定输入组引导程序 4

html - 固定输入组引导程序 4

问题描述

我的引导程序有问题，因为我需要保留静态搜索栏，如下所示：

在此处输入图像描述

为此，我使用以下代码：

HTML：

<nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>  
<div class="list-page">
  <div class="row-search-bar">
    <div class="pos-rel">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
        </div>
    </div>
  </div>
  <div class="container">
      <div class="row">
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
      </div>
  </div>
</div>

CSS：

@media (max-width: 575.98px) {  
  .list-page {
    padding-top: 24%;
    margin-left: 10%;
    margin-right: 10%;
  } 
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
  .list-page {
    padding-top: 14%;
    margin-left: 10%;
    margin-right: 10%;
  }  
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 
  .list-page {
    padding-top: 7%;
    margin-left: 10%;
    margin-right: 10%;
  }
 }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
  .list-page {
    padding-top: 6%;
    margin-left: 10%;
    margin-right: 10%;
  }
 }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
  .list-page {
    padding-top: 6%;
    margin-left: 10%;
    margin-right: 10%;
  }
 }

 .pos-rel{
  position: relative;
  width:100%;
 }

 .row-search-bar{
  position: relative;
  z-index: 1030;
  background-color:red;
 }

我之前的代码的重要部分是它使用了position: relative;cssrow-search-bar类中的属性，但是当你移动页面的内容时，这个搜索栏并没有停留在原地，它随着内容移动。对于上述内容，为了实现让搜索栏保持原位的目标，我position: fixed;在row-search-barcss 类中使用，但发生了这种情况：

在此处输入图像描述

那么当我向上/向下滚动并且搜索栏看起来像这样时，我应该怎么做才能使搜索栏保持在原位：

在此处输入图像描述

非常感谢！

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

将 acontainer-fluid fixed-top w-100用于导航栏和搜索表单。在这个容器内，使用一个包含两个的容器rows：一个用于导航，一个用于搜索表单。既然使用fixed-top了，就需要下推body的其他内容。将 body 的 padding-top 设置160px为这样做。这个固定容器的高度是160px。阅读更多关于为什么你需要这样做 

body {
  padding-top: 160px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid fixed-top w-100">
  <div class="container ">
    <div class="row">
      <div class="col">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" 
                  aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="input-group mb-3 mt-5">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" 
                 aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/ZRLXWM？

如果您想要全角导航，请将导航栏移到 之外container并删除container-fluid.

body {
  padding-top: 160px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid fixed-top w-100 p-0">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="input-group mb-3 mt-5">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/VdPMPv

推荐阅读