Фиксированная входная группа Bootstrap 4

Question

У меня проблема с начальной загрузкой, потому что мне нужно оставить статическую строку поиска, как показано ниже:

Для этого я используюследующий код:

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; в классе row-search-bar css, но когда вы перемещаете содержимое страницы, эта панель поиска не остается на месте, она перемещается вместе с содержимым.Для вышеизложенного, чтобы достичь цели сохранения панели поиска, я использую position: fixed; в классе row-search-bar css, но это происходит:

Итак, что я должен сделать, чтобы панель поиска оставалась на месте, когда я прокручиваю вверх / вниз, и строка поиска выглядит следующим образом:

Большое спасибо!

Answer 1

Используйте container-fluid fixed-top w-100 для панели навигации и формы поиска.Внутри этого контейнера используйте контейнер с двумя rows: один для навигации и один для формы поиска.Так как вы используете fixed-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

Answer 2

Я не думаю, что есть проблема с position: relative; или кодом.

Я запустил тот же код, и он, кажется, работает нормально для меня.

Естьвнешний вид

Проблема, с которой вы столкнулись, заключается в том, что вы не включили файлы Bootstrap 4.

Возможно, вы используете компакт-диск Bootstrap 3, который выглядит как https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

Я бы посоветовал вам изменить его на

https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css