内联搜索栏在bootstrap [英] Inline search bar on bootstrap

问题描述

我想在导航菜单的左侧添加一个内嵌的搜索栏。它是一个按钮，显示其旁边的文本框，以允许用户输入他们想要的帽子。我已经尝试定位在线，但由于某种原因，它出现在较小的设备上的菜单图标的顶部。

I am trying to add a in-line search bar on the left on the navigation menu. It is a button which reveals a text box next to it to allow the user to enter hat they want. I have tried to position it in-line but for some reason it appears ontop of the menu icon on smaller devices.

我也想知道如何让文本框在菜单元素上淡入淡出，而不是出现在它们旁边。

I was also wondering how I could have the text box fade in and out over the menu elements instead of it appearing next to them.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
     <div class="navbar-header">

        <form class="navbar-form navbar-left" role="search">

            <button id='search-button' class='btn btn-default '><span class='glyphicon glyphicon-search'></span></button>

            <div id='search-form' class="form-group">
              <div class="input-group">
                <span id='search-icon' class="input-group-addon"><span class='glyphicon glyphicon-search'></span></span>
                <input type="text" class="form-control" placeholder="Search">
              </div>
            </div>
          </form>

          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
    </div>


  </div>
</nav>
<script type='text/javascript'>

      $(function(){

         $("#search-button, #search-icon").click(function(e){
             e.preventDefault();
             $("#search-button, #search-form").toggle();
         });
      })  
</script>

我忘了提及，我也无法在任何地方发布此表单，因为搜索按钮隐藏了文本框。我可以做些什么来解决这个问题？

I forgot to mention, I am also unable to post this form anywhere since the search button hides the textbox. What could I do to fix this?

推荐答案

这可能有帮助：搜索栏将出现在点击链接和按钮将保持曝光在所有视口，而不是隐藏一旦你是768px。请参阅示例。

This may help: the search bar will appear over the links on click and the button will remain exposed on all viewports instead of being hidden once you're under 768px. See example.

$(".btn-search").click(function(e) {
  $("#search-input, #btn-go").fadeToggle();
});
$(".hasclear").keyup(function() {
  var t = $(this);
  t.next('span').toggle(Boolean(t.val()));
});

$(".clearer").hide($(this).prev('input').val());

$(".clearer").click(function() {
  $(this).prev('input').val('').focus();
  $(this).hide();
});

/**Custom**/

body,
html {
  margin-top: 60px;
}
.navbar.navbar-custom {
  height: 50px;
  border: none;
}
.navbar.navbar-custom .navbar-toggle {
  z-index: 1;
  border: none;
  background: none;
}
.navbar.navbar-custom .navbar-collapse {
  background: #f5f5f5;
}
.formSearch {
  left: 0;
  position: absolute;
}
.formSearch .has-feedback span.glyphicon {
  padding: 7px;
  margin-right: 10px;
  cursor: pointer;
  pointer-events: auto;
  color: #444;
}
.btn.btn-search,
.btn.btn-search:hover,
.btn.btn-search:focus {
  background: none;
  height: 50px;
  box-shadow: none;
  outline: none;
  border-radius: 0;
  border: none;
}
#search-input,
#search-input:focus {
  height: 50px;
  background: #f5f5f5;
  box-shadow: none;
  outline: none;
  font-size: 20px;
  border: none;
  display: none;
}
.input-group-btn #btn-go {
  height: 50px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  outline: none;
  background: #444;
  color: #fff;
  display: none;
}
@media (min-width: 768px) {
  .navbar-custom .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-custom .navbar-nav > li {
    float: none;
    display: inline-block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <form class="formSearch" role="search"> <span class="input-group"> <span class="input-group-btn">
        <button class="btn btn-default btn-search" type="button"><span class="glyphicon glyphicon-search"></span>

        </button>
        </span>
        <div class="has-feedback">
          <input type="text" class="form-control hasclear" id="search-input" placeholder="Search for..."> <span class="clearer glyphicon glyphicon-remove form-control-feedback"></span>

        </div> <span class="input-group-btn">
        <button class="btn btn-default" id="btn-go" type="button"> Search</button>
      </span>
        </span>
    </div>
    </form>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a>

      </li>
      <li><a href="#">Forums</a>

      </li>
      <li><a href="#">About Us</a>

      </li>
      <li><a href="#">Sponsorship</a>

      </li>
      <li><a href="#">Bespoke Events</a>

      </li>
      <li><a href="#">Vacancies</a>

      </li>
      <li><a href="#">Contact</a>

      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <div class="well well-lg">Boostrap Search Bar</div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.</p>
</div>

这篇关于内联搜索栏在bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！