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>

更新谢谢大家的答案。我赞成了帮助我得到我想要的答案。但是，我最终做了一些自己的事情。

<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

将width:auto;display: inline-block;设置为输入文本字段

检查这个小提琴：

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

Answer 2

那是因为你把'col-xs-12＆＃39;两种形式。因此，每个表格将占用所有网格系统（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

尝试更改为仅＆＃34; col-sm-6＆＃34; 和名为＆＃34的类;右拉＆＃34;并添加＆＃34; float-right＆＃34;。看看这个：https://jsfiddle.net/ceqvpu01/1/

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

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

左右两端的Bootstrap元素

4 个答案: