как сделать bootstrap 3 отзывчивым navbar с полноразмерной формой поиска посередине? - PullRequest
Новая
       5

как сделать bootstrap 3 отзывчивым navbar с полноразмерной формой поиска посередине?

0 голосов
/ 17 мая 2018

Я пытаюсь создать панель навигации, содержащую форму поиска, которая заполнит все оставшееся пространство между .navbar-brand и содержимым .navbar-collapse.

когда ширина области просмотра меньше 767px (когда срабатывает стиль свертывания навигационной панели), мой код работает нормально. но когда ширина области просмотра превышает 767 пикселей, форма поиска становится маленькой ..

вот HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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">
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <div class="navbar-search_container">
        <div class="full_width_div">
          <div class="right_part-wrapper">
            <a class="btn btn-default">z</a>
          </div>
          <div class="remaining-wrapper">
            <form class="my-search_form-group">
              <div class="input-group">
                <input type="text" class="form-control" name="q" placeholder="keyword">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    a
                  </button>
                </span>
              </div>
            </form> <!-- /.my-search_form-group -->
          </div> <!-- /.left_part-wrapper -->
        </div> <!-- /.full_width_div -->
      </div> <!-- /.navbar-search_container -->
    </div> <!-- /.navbar-header -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

и вот css: 

/* css to allow a div fit remaining width
   based on https://stackoverflow.com/a/5043876/1235167 */
.full_width_div {
  width: 100% !important;
}
.full_width_div > .right_part-wrapper {
  /* white-space: nowrap; */
  float: right;
}
.full_width_div > .left_part-wrapper {
  float: left;
}
.full_width_div > .remaining-wrapper {
  /* white-space: nowrap; */
  overflow: hidden;
}

вот это jsfiddle

после работы с инструментами разработчика, я обнаружил, что мой код работает только в области просмотра меньше 767px, потому что .navbar-header получает правило "width: 100%", когда оно ниже 767px. так что теперь я решил, что мне нужно сделать часть .navbar-search_container, чтобы заполнить оставшееся пространство, оставленное содержанием .navbar-collapse. как я это сделал? они на другом уровне и структуре DOM .. пожалуйста, помогите. Я работал над этим в течение нескольких дней ..

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

, если кому-то интересно, так как, похоже, ни у кого нет подходящего решения, я отказался от этой проблемы и использовал два набора форм поиска для мобильного представления и рабочего стола.

0 голосов
/ 17 мая 2018

Настройка минимальной ширины в сочетании с медиа-запросом может быть опцией: 

@media (min-width: 768px) {
  .full_width_div {
    min-width: 500px;
  }
}

fiddle

...