Bootstrap CSS Mobile Größe ändern Problem

Question

Ich habe ein Problem mit Bootstrap beim Ändern der Größe der Seite auf eine mobile Größe. Das Eingabeformular wird in Inline verschoben, und das verwendete Glyphon bleibt nicht an derselben Position, wenn das Fenster in der Größe geändert wird. Ich habe 2 Bilder unten eingefügt, wie es vor und nach der Größenänderung des Fensters aussieht.

HTML-Code für Eingangsabschnitt:

 <div class="col-sm-4" id="end"> 
      <div class="row"> 
       <div class="col-sm-6" id="start"> 
        <span class="top">Date and Time</span> 
        <div class="input-group"> 
         <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time"></span></div> 
         <input type="text" class="col-xs-4" id="date"> 
         <input type="text" class="col-xs-4" id="time"> 
        </div> 
        <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button> 
       </div> 
       <div class="col-sm-6" id="start"> 
       </div> 
      </div> 

     </div> 

CSS für das Datum und die Uhrzeit-IDs:

#date { 
max-width: 100px; 
min-width: 100px; 
font-size: 12px; 
} 

#time { 
max-width: 100px; 
min-width: 100px; 
margin-bottom: 0px; 
font-size: 12px; 
} 

Normal sized look

Mobile sized look

Answer 1

Wenn Sie Ihre #date und #time bieten Sizing h bis min-width: 100px und max-width: 100px auch, deine divs werden nicht größer oder kleiner als 100px sein. Vielleicht sollten Sie drei Erklärungen wie verwenden: width: 150px, min-width: 100px und max-width: 200px;

Eine andere Möglichkeit wäre die prozentuale Sizing oder @media screen and (...)

w3schools eine wirklich gute Doku muss es sich um ein heraus lernen, wie man mit allen zu handhaben die verschiedene Arten der Größenanpassung.

Answer 2

Es ist nicht die schönste Lösung, aber Sie können versuchen, die "Eingabe" zu erzwingen, wie es mit class="col-lg-12" sein kann.

So:

 <div class="col-sm-4" id="end"> 
     <div class="row"> 
      <div class="col-sm-6" id="start"> 
       <span class="top">Date and Time</span> 
       <div class="input-group"> 
        <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time" ></span></div> 
        <input type="text" class="col-lg-12" id="date"> 
        <input type="text" class="col-lg-12" id="time"> 
       </div> 
       <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button> 
      </div> 
      <div class="col-sm-6" id="start"> 
      </div> 
     </div>