如何以完全响应的方式在中心执行此引导搜索框？

Posted

技术标签:

【中文标题】如何以完全响应的方式在中心执行此引导搜索框？【英文标题】：how to do this bootstrap search box in center with fully responsive? 【发布时间】：2016-08-10 04:41:23 【问题描述】：

我想在页面中心制作带有选择框的搜索框，并且所有字段都相互粘连。我尝试使用左边距。但我认为这不是正确的方法。请帮助我做到这一点，以使所有人都处于响应状态。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">

</style>
<div class="col-md-12">
  
   <form action="#" method="get" id="search_mini_form">
      <div class="col-md-1 catnames">
         <select name="cat" class=" search-categories">
            <option>Categories</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
     
      </div>
      <div class="col-md-1 catnames catnames-arrow ">
         <select name="cat" class="search-categories search-Hourly">
            <option>Hourly</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
       
      </div>
      <div class="col-md-4 catquery">
   
         <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off">
      </div>
      <div class="col-md-1 catsubmit">
         <div class="row">
            <i class="fa fa-search"></i>
         </div>
      </div>
      <div id="search_autocomplete" class="search-autocomplete"></div>
   </form>
   <div>
   </div>
</div>

【问题讨论】：

【参考方案1】：

这是你想要的吗？ 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <style type="text/css">
    
    </style>

    <div class="col-md-12 ">
      <div class="row">
       <form action="#" method="get" id="search_mini_form">
          <div class="col-sm-offset-2 col-sm-2 catnames">
             <select name="cat" class="form-control search-categories">
                <option>Categories</option>
                <option value="3">abcd</option>
                <option value="4">abcd</option>
                <option value="5">abcd</option>
             </select>
          </div>
          <div class="col-sm-2 catnames catnames-arrow ">
             <select name="cat" class="form-control search-categories search-Hourly">
                <option>Hourly</option>
                <option value="3">abcd</option>
                <option value="4">abcd</option>
                <option value="5">abcd</option>
             </select>
          </div>
          <div class="col-sm-4 catquery ">
       <div class="input-group">
             <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
         <div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
            </div>
          </div>
          <div id="search_autocomplete" class="search-autocomplete"></div>
       </form>
       </div>
    </div>

这里是jsbin

【讨论】：

但我也希望在桌面版本中所有的都在中心并且垂直地相互粘连。明白了吗？ nope.. 你的意思是所有都应该在单行吗？我想你应该从 getbootstrap.com 了解col-sm-、col-md- 等。 是的。我只想在桌面版本中都在单行中，并且所有这些之间也没有差距。【参考方案2】：

我做了一个小小提琴来演示如何做到这一点：https://jsfiddle.net/2nhzytu5/

无论桌面版还是移动版，要让字段在中心浮动，您可以使用col-offset-xx（了解更多here）

然后，为了让它们粘在一起，你应该使用 bootstrap 的 input-group 类。 （更多信息here）

所以这将是你的基地：

<form class="form-horizontal">
  <div class="col-lg-offset-3 col-lg-6">
      <div class="input-group">
         <!-- Your fields here -->
      </div>
  </div>
</form>

现在只需添加您的字段：

<form class="form-horizontal">
  <div class="col-lg-offset-3 col-lg-6">
    <div class="input-group">

      <select id="yourId" class="selectpicker form-control" title="Please select">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>

      <select id="yourId2" class="selectpicker form-control" title="Please select">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>

      <input type="text" class="form-control" name="snpid" placeholder="Test">

      <span class="input-group-addon">
          <i class="fa fa-search"></i>
      </span>
    </div>
  </div>
</form>

避免在此处使用元素，因为它们无法在 WebKit 浏览器中完全设置样式。

【讨论】：

【参考方案3】：

尝试改变整个容器的类：

<div class="col-md-12 ">

到：

<div class="col-md-4 col-md-offset-4">

您还可以为里面的每个元素添加样式，如下所示：

text-align: center;
margin: 0 auto;

【讨论】：

【参考方案4】：

你可以通过应用一些引导类来做到这一点

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">

</style>
<div class="col-md-12">
  
   <form action="#" method="get" id="search_mini_form">
      <div class="col-md-1 col-sm-2 form-group col-sm-offset-2 col-md-offset-3 col-xs-12 catnames">
         <select name="cat" class="form-control search-categories">
            <option>Categories</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
     
      </div>
      <div class="col-md-1 col-sm-2 form-group catnames catnames-arrow ">
         <select name="cat" class="form-control search-categories search-Hourly">
            <option>Hourly</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
       
      </div>
      <div class="col-md-4 col-sm-4 form-group col-xs-12 catquery">
			<div class="input-group">
			  <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" class="form-control" >
				<span class="input-group-btn">
					<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
				 </span>	
			</div>
      </div>
    
      <div id="search_autocomplete" class="search-autocomplete"></div>
   </form>
   <div>
   </div>
</div>

【讨论】：

以上是关于如何以完全响应的方式在中心执行此引导搜索框？的主要内容，如果未能解决你的问题，请参考以下文章

执行查询搜索以匹配字符而不是确切的单词。

Access 2007 列表框：如何以编程方式单击？

iOS - 完全自定义搜索框

Access 2007列表框：如何以编程方式单击？

当用户停止输入搜索框时执行 api 请求

如何在 bootstrap 3 导航栏中使 select2 v4 搜索框响应？