Mindestbreite des Eingabefeldes einstellen css

Question

Ich bin neu im Styling. Ich habe ein Eingabefeld, das eine feste Mindestbreite zu haben scheint. Wenn der Bildschirm klein ist, schrumpft das Eingabefeld nicht mehr und geht über den Rand hinaus, wie unten gezeigt. Ich habe versucht, die Eingabe {min-width: 10px} zu setzen, um zu sehen, ob das behoben wurde, aber es nicht. Ich bin mit Bootstrap-4

<div class="row"> 
     <div class="col-md-6"> 
      <h5>Start Time:</h5> 
      <div class="row"> 
       <div class="col-xs-4"> 
        <input type="number" placeholder="hour"> 
       </div> 

       <div class="col-xs-1"> : </div> 

       <div class="col-xs-4"> 
        <input type="number" placeholder="minutes"> 
       </div> 

       <div class="col-xs-3"> 
        <select id="severity-dropdown"> 
         <option [value]="am">am</option> 
         <option [value]="am">pm</option> 
        </select> 
       </div> 
      </div> 
     </div> 

     <div class="col-md-6"> 
      <h5>Stop Time:</h5> 
      <div class="row"> 
       <div class="col-xs-4"> 
        <input type="number" placeholder="hour"> 
       </div> 

       <div class="col-xs-1"> 
        : 
       </div> 

       <div class="col-xs-4"> 
        <input type="number" placeholder="minutes"> 
       </div> 

       <div class="col-xs-3"> 
        <select id="severity-dropdown"> 
         <option [value]="am">am</option> 
         <option [value]="am">pm</option> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Versuchen Hinzufügen form Steuerung mit dem Eingang:

<input class="form-control" type="number" placeholder="minutes"/> 

Answer 2

Sie Medienanfragen für diese Aufgabe wie verwenden können:

@media screen and (max-width:500px){ 
    input{max-width:40px;} 

}