Eingabe/Formularleiste reaktionsfähig mit Bootstrap

Ich habe ein Banner über eine Seite, mit der der Benutzer die angezeigten Daten filtern kann. Dies muss reaktionsfähig sein. Wenn Sie jedoch die Größe des Browserfensters verringern, werden die Schaltflächen für die Datumsauswahl (jQuery Datepicker) in eine andere Zeile verschoben, und das Ganze sieht, ehrlich gesagt, entsetzlich aus. Der Submit-Button geht auch über die Dinge hinaus. Ich habe mit Medienabfragen experimentiert, aber um ehrlich zu sein, kenne ich Bootstrap-responsive Layouts nicht sehr gut. Dies ist ein bestehendes Projekt, das ich erweitere, so dass jeder Rat sehr geschätzt wird. Es werden 2 externe Steuerelemente verwendet: jQuery datepicker und Sumo Select. Markup unter:Eingabe/Formularleiste reaktionsfähig mit Bootstrap

<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 no-gutter"> 
 
     <div class="form-inline inline-fields "> 
 
     <h3>From</h3> 
 
     <input class="form-control dateField datepicker" id="dateRangeFrom" name="dateRangeFrom" type="text" value="" placeholder="dd/mm/yyyy"><button type="button" class="ui-datepicker-trigger btn btnCalendar"><span class="calendarIcon"></span></button> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-3 col-sm-3 col-md-3 no-gutter"> 
 
     <div class="form-inline inline-fields "> 
 
     <h3>To</h3> 
 
     <input class="form-control dateField datepicker" id="dateRangeTo" name="dateRangeTo" type="text" value="" placeholder="dd/mm/yyyy"><button type="button" class="ui-datepicker-trigger btn btnCalendar"><span class="calendarIcon"></span></button> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-2 col-sm-2 col-md-2 no-gutter"> 
 
     <div class="left form-inline"> 
 
     <h3>Status</h3> 
 
     <div class="SumoSelect" tabindex="0"> 
 
      <select class="sumo-select form-control" id="SelectOptions" multiple="multiple" name="SelectOptions"> 
 
          <option value="0">Option 0</option> 
 
          <option value="1">Option 1</option> 
 
          <option value="2">Option 2</option> 
 
          <option value="3">Option 3</option> 
 
         </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-3 col-sm-3 col-md-3 no-gutter"> 
 
     <div class="form-inline "> 
 
     <h3>Search</h3> <input class="form-control search" id="SearchText" name="SearchText" type="text" value=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-xs-1 col-sm-1 col-md-1 no-gutter"> 
 
     <input type="submit" value="Submit" class="primary"> 
 
    </div> 
 
    </div> 
 
</div>

Es gibt CSS die h3-Tags Anzeige inline mit den Formularfeldern zu machen. Dies ändert sich auch, wenn das Browser-Ansichtsfenster in der Größe geändert wird.

Quelle

2017-06-27 fhevol

Können Sie die jQuery und auch CSS? – InvincibleM

dieses Versuchen

.datepicker{display: inline-block; width: 94%;}

<html> 
 
    <head> 
 
    <title>Test</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
     .datepicker{display: inline-block; width: 94%;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class=" col-md-3 col-sm-6 no-gutter"> 
 
      <div class="form-inline inline-fields"> 
 
      <h3>From</h3> 
 
      <input class="form-control dateField datepicker" id="dateRangeFrom" name="dateRangeFrom" type="text" value="" placeholder="dd/mm/yyyy"><button type="button" class="ui-datepicker-trigger btn btnCalendar"><span class="calendarIcon"></span></button> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 no-gutter"> 
 
      <div class="form-inline inline-fields "> 
 
      <h3>To</h3> 
 
      <input class="form-control dateField datepicker" id="dateRangeTo" name="dateRangeTo" type="text" value="" placeholder="dd/mm/yyyy"><button type="button" class="ui-datepicker-trigger btn btnCalendar"><span class="calendarIcon"></span></button> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-2 col-sm-6 no-gutter"> 
 
      <div class="left form-inline"> 
 
      <h3>Status</h3> 
 
      <div class="SumoSelect" tabindex="0"> 
 
       <select class="sumo-select form-control" id="SelectOptions" multiple="multiple" name="SelectOptions"> 
 
       <option value="0">Option 0</option> 
 
       <option value="1">Option 1</option> 
 
       <option value="2">Option 2</option> 
 
       <option value="3">Option 3</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 no-gutter"> 
 
      <div class="form-inline "> 
 
      <h3>Search</h3> 
 
      <input class="form-control search" id="SearchText" name="SearchText" type="text" value=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-1 col-sm-12 no-gutter text-center"> 
 
      <div class="form-inline "> 
 
      <h3>&nbsp;</h3> 
 
      <input type="submit" value="Submit" class="primary"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-06-27 05:47:21

Eingabe/Formularleiste reaktionsfähig mit Bootstrap

Antwort

Verwandte Themen