Bootstrap - 搜索框旁边的按钮答案

【问题标题】：Bootstrap - Button next to search boxBootstrap - 搜索框旁边的按钮
【发布时间】：2015-06-12 21:50:41
【问题描述】：

所以我的搜索框如下：

<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

有什么帮助吗？谢谢。

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

【问题讨论】：

请同时发布您的css

标签： html twitter-bootstrap

【解决方案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

附加搜索按钮

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

【讨论】：

这行得通。按钮实际上可以附加到搜索框吗？
请找到更新答案

【解决方案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>

这将解决您的问题。

【讨论】：

【解决方案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>

这应该可以解决问题。

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

这就是你可以做的。您希望 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>

【讨论】：

【解决方案6】：

发生这种情况是因为“搜索”属性是：

display:block; 
width:100%;

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

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

现在可以用了吗？

【讨论】：