引導組按鈕表格

Question

我使用sb-admin模板，並且由於下面的組按鈕延伸，我被困在側欄中的表單中。原始代碼是這樣的：

<input type="text" class="form-control" placeholder="Search..."> 
<span class="input-group-btn"> 
    <button class="btn btn-default" type="submit"> 
    <i class="fa fa-search"></i> 
</button> 
</span> 

，輸出是：

但是當我添加一個表單標籤：

<form> 
    <input type="text" class="form-control" placeholder="Search..."> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="submit"> 
     <i class="fa fa-search"></i> 
    </button> 
    </span> 
</form> 

它變成這樣：

有沒有快速解決這個問題？謝謝。

Answer 1

你是你input前場缺少<div class="input-group">。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form> 
 
    <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"> <i class="fa fa-search"></i></button> 
 
     </span> 
 

 
    </div> 
 
    <!-- /input-group --> 
 
    </form> 
 
</div>

Answer 2

這是一種方法，但您需要使用CSS來調整input或button或both的padding/height，以使它們相等。

DEMO

<form class="form-inline"> 
     <div class="input-group"> 
      <input type="text" placeholder="Search.." class="form-control"> 
      <span class="input-group-addon"> 
       <button class="btn btn-primary btn-sm"> 
        <i class="glyphicon glyphicon-search"></i> 
       </button> 
      </span> 
     </div> 
    </form>