Bootstrap Elemente auf der linken und rechten Enden

Question

ich eine Filterform an der Spitze haben, die

und wie diese in der mobilen Layout-

wie folgt aussieht Dies ist mein Code

<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> 

Was kann ich damit machen? Ich würde es mögen, wenn das Suchfeld und die 2 Knöpfe in derselben Zeile daneben stehen, ohne nach rechts zu schweben, aber das mobile Layout ist durcheinander. Irgendwelche Vorschläge sind willkommen. Vielen Dank!

<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 Vielen Dank für Ihre Antworten. Ich habe die Antworten aufgefrischt, die mir geholfen haben, zu bekommen, was ich wollte. Ich habe jedoch etwas Eigenes gemacht.

<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

Versuchen Änderung nur „col-sm -6 " und die Klasse namens" pull-right "und fügen Sie" float-right "hinzu. Blick auf diese: https://jsfiddle.net/ceqvpu01/1/

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

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

Answer 2

das ist, weil Sie die 'Col-Xs-12' auf beiden Formular setzen. so nimmt jede Form das gesamte Gittersystem (12) und die zweite Form wird unter die erste gelegt, weil es kein Gitter mehr dafür gibt. Versuchen Sie, Ihre Col-xs-12 zu Col-Xs-6 für beide Form

Answer 3

So ändern? Ich habe col-sm-6 für beide, und änderte col-xs-12 zu 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; zu Eingabetextfeld gesetzt

Kontrolle dieser Geige:

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