引導元素結束

Question

我有一個過濾器形式的，看起來像這樣

像這樣在移動佈局

的頂部。這是我的代碼

<form class="navbar-form " role="search" id="searchform" method="get" action=""> 
    <div class="row"> 
     <div class="col-lg-6 col-md-6 col-xs-12"> 
     <div class="form-group "> 
      Results per page: 
      <select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()"> 
       <option value="5" selected="">5</option> 
       <option value="10">10</option> 
       <option value="20">20</option> 
       <option value="50">50</option> 
       <option value="100">100</option> 
      </select> 
     </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-xs-12"> 
     <div class="form-group pull-right"> 
      <input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value=""> 
      <button type="submit" class="btn btn-default">Go</button> 
      <button type="button" onclick="resetform()" class="btn btn-default">Reset</button> 
     </div> 
     </div> 
    </div> 
</form> 

我該怎麼辦？如果搜索框和2個按鈕位於同一行上，而不是浮動到右側，但移動版面全部搞亂，我希望它。歡迎任何建議。謝謝！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<form class="navbar-form " role="search" id="searchform" method="get" action=""> 
 
     <div class="row"> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
      <div class="form-group "> 
 
       Results per page: 
 
       <select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()"> 
 
        <option value="5" selected="">5</option> 
 
        <option value="10">10</option> 
 
        <option value="20">20</option> 
 
        <option value="50">50</option> 
 
        <option value="100">100</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
      <div class="form-group pull-right"> 
 
       <input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value=""> 
 
       <button type="submit" class="btn btn-default">Go</button> 
 
       <button type="button" onclick="resetform()" class="btn btn-default">Reset</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </form>

UPDATE 謝謝大家對你的答案。我已經提出了幫助我得到我想要的答案。但是，我最終做了一些我自己的事情。

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
       <div class="input-group pull-right"> 
        <input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="<?php echo ($this->input->get('search',true)); ?>"> 
        <span class="input-group-btn"> 
        <button type="submit" class="btn btn-default">Go</button> 
        <button type="button" onclick="resetform()" class="btn btn-default">Reset</button> 
        </span> 
       </div> 

       </div> 

Answer 1

嘗試改變只「COL-SM -6「和名爲」pull-right「的類並添加」float-right「。 看看這個：https://jsfiddle.net/ceqvpu01/1/

input[type="text"] { 
    display: inline-block; 
    width: 100%; 
} 

@media (min-width: 768px) { 
    .float-right{ 
    float: right; 
    } 
} 

Answer 2

這是因爲你把'col-xs-12'放在兩個窗體上。所以每個表格將會佔用所有的網格系統（12），而第二個表格將被放在第一個表格之下，因爲沒有更多的網格。嘗試改變你的col-xs-12到col-xs-6兩種形式

Answer 3

喜歡這個？我添加col-sm-6到兩個，並且改變col-xs-12到col-xs-6

<form class="navbar-form " role="search" id="searchform" method="get" action=""> 
    <div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
     <div class="form-group "> 
      Results per page: 
      <select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()"> 
       <option value="5" selected="">5</option> 
       <option value="10">10</option> 
       <option value="20">20</option> 
       <option value="50">50</option> 
       <option value="100">100</option> 
      </select> 
     </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
     <div class="form-group pull-right"> 
      <input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value=""> 
      <button type="submit" class="btn btn-default">Go</button> 
      <button type="button" onclick="resetform()" class="btn btn-default">Reset</button> 
     </div> 
     </div> 
    </div> 
</form> 

Answer 4

設置width:auto;display: inline-block;輸入文本字段

檢查此琴：

https://jsfiddle.net/DTcHh/30416/