設置輸入字段css的最小寬度

Question

我對樣式很陌生。我有一些輸入字段，似乎有一個固定的最小寬度，這樣當屏幕很小時，輸入字段不會再縮小並越過邊界，如下所示。我試圖設置輸入{min-width：10px}來查看是否修復了它，但它沒有。我使用的引導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

嘗試增加表單控件輸入：

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

Answer 2

您可以使用媒體查詢此任務，如：

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

}