引导元素结束

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/