如何在中心完成响应的这个引导搜索框？

时间：2016-04-18 12:29:44

标签： html css twitter-bootstrap css3 twitter-bootstrap-3

我想在页面中央的选择框下面创建搜索框，并且所有字段都相互粘贴。我尝试使用margin-left。但我认为这不是正确的方法。请帮助我这样做，让所有人都在响应中心。

<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>

4 个答案:

答案 0 :(得分：0)

这是你想要的吗？

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这里是jsbin

答案 1 :(得分：0)

你可以通过应用一些Bootstrap类

来做 

<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>

答案 2 :(得分：0)

尝试更改整个容器的类：

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

为：

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

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

text-align: center;
margin: 0 auto;

答案 3 :(得分：0)

我做了一个小小的演示如何做到这一点：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浏览器中完全设置样式。

相关问题
最新问题