bootstrap3中的內聯表格

Question

我試圖在（bootstrap-css）列中找到彼此相鄰的2個輸入字段，但看起來似乎無法正確顯示。

這裏是我迄今爲止 https://jsfiddle.net/9hrx59bd/

還當我把兩個輸入字段中輸入相同的組中，除去這並不能幫助：

... 
    </div> 
    <div class="input-group "> 

我怎樣才能得到他們彼此相鄰，並使用全寬？

Answer 1

你需要讓這兩個輸入組一個山坳-MD-6，這裏是結果：link

<div class="row"> 
    <form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post"> 
     <div class="input-group col-md-6 col-sm-6 col-xs-6"> 
      <input class=" form-control " placeholder="city" id="location" type="text" name="location"> 
     </div> 
     <div class="input-group col-md-6 col-sm-6 col-xs-6"> 
      <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" type="submit"> 
        <span class=" glyphicon glyphicon-search" ></span> 
       </button> 
      </span> 
     </div> 
    </form> 
</div> 

編輯 我把它加入COL-SM-6工作在較小的屏幕和col-XS-6藏漢

Answer 2

引導內嵌表格

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 

 

 

 
    <form id="searchform" action="" accept-charset="utf-8" method="post"> 
 
     <div class="col-md-6"> 
 
     <div class=" form-group"> 
 
      <input class="form-control" placeholder="city" id="location" type="text" name="location"> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
     <div class="form-group input-group"> 
 
      <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
 
      <span class="input-group-btn"> 
 
        <button class="btn btn-danger" type="submit"> 
 
         <span class=" glyphicon glyphicon-search" ></span> 
 
      </button> 
 
      </span> 
 
     </div> 
 
     </div> 
 

 

 
    </form> 
 
    </div> 
 
</div>

Answer 3

我想你只是想form-control和input-group。

<div class="row"> 
     <div class="col-md-6"> 
      <form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post"> 
       <input class="form-control" placeholder="city" id="location" type="text" name="location"> 
       <div class="input-group"> 
        <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
        <span class="input-group-btn"> 
        <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </span> 
       </div> 
      </form> 
     </div> 
    </div> 

Demo

編輯：另一種選擇是使用網格列，但去除填充：

.pr-0{ 
    padding-right:0; 
} 
.pl-0{ 
    padding-left:0; 
} 

<form class="row" id="searchform" action="" accept-charset="utf-8" method="post"> 
     <div class="col-xs-6 col-sm-3 pr-0"> 
      <input class="form-control" placeholder="city" id="location" type="text" name="location"> 
     </div> 
     <div class="col-xs-6 col-sm-3 pl-0"> 
      <div class="input-group"> 
       <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job"> 
       <span class="input-group-btn"> 
        <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </span> 
      </div> 
     </div> 
</form> 

看到demo

Answer 4

第二項假設你想要e旁邊的input其他，請參考代碼：

請在全頁面查看結果。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form action="" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" placeholder="Username"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" placeholder="Password"> 
 
    </div> 
 
</form>