Question

所以我的搜索框如下：

<div class="input-group-"> 
                        <form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>"> 
                            <input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
                            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>                         
                        </form> 
                    </div>

但是，显示如下：http://gyazo.com/7c6d81ea6341d2d4461c74eb4afb76e2

有任何帮助吗？感谢。

编辑：使用bootstrap min css。 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css

Answer 1

要使内联表单保持您的代码

<form id="form_search" name="form_search" method="get" action="" class="form-inline">
   <div class="form-group">
     <div class="input-group">
      <input class="form-control" placeholder="Search for..." type="text">
      <span class="input-group-btn">
         <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>
  </div>
</form>

http://www.bootply.com/p1BgBMMjN9

更新了网址

http://www.bootply.com/6wVwlnjp0a

对于附加搜索btn

http://www.bootply.com/1jX4AhOZ3o

Answer 2

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="row">
<div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  </div>

这将解决您的问题。

Answer 3

把这样的div放进去。

    <div class="input-group">
    <input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<span class="input-group-btn">    
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    </span>
    </div>

那应该可以解决问题。

Answer 4

<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
  <div class="input-group-btn">
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</div>

Answer 5

这是因为'搜索'属性是：

display:block; 
width:100%;

所以在类'form-control'的css中改变它，如：

.form-control{
display:inline;
width:50px;
}

现在有用吗？

Answer 6

这是你可以做的。您希望一行上有Input和Search。

此代码为

 <form class="form-inline" role="form">
   <div class="form-group">
     <input type="email" class="form-control" id="email" placeholder="Enter email">
     <button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search" style="font-size:24px"></span></button>
  </div>
</form>

Bootstrap - 搜索框旁边的按钮

6 个答案: