如何使用Bootstrap縮放瀏覽器超過100％時保持行位相同？

Question

我有一個引導網格系統的小問題，我有一個網格設置與col-md-6的兩個部分，現在的問題是當我縮放我的瀏覽器超過100％我的關閉標籤和輸入正在移動到下一個線。我希望它們始終保持在同一個地方，縮放不應該影響行的位置。我嘗試使用col-xs-1，但它不起作用。我如何使用bootstrap來實現這個任務？

main.html中

<div class="row"> 
       <div class="container col-md-6"> 
        <div class="form-group"> 
         <label class="col-md-5">Actual Cycle Start:</label> 
         <div class="col-md-7"> 
          <div class="row"> 
           <div class="col-xs-5"> 
            <input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate" 
             k-format="'MM/dd/yyyy'" disabled /> 
           </div> 
           <div class="col-xs-1"> 
            <label class="control-label"> Close:</label> 
           </div> 
           <div class="col-md-5 changeWdh"> 
            <input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled /> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="form-group col-md-6 fieldHeight"> 
        <label for="challengeOutstand" class="col-md-5">Challenges 
         Outstanding:</label> 
        <div class="col-md-7"> 
         <input type="text" class="form-control" id="challengeOutstand" 
          name="challengeOutstand" maxlength="256" 
          ng-model="riskAssessmentDTO.challengesOutstanding" disabled /> 
        </div> 
       </div> 

      </div> 

的main.css

.changeWdh{ 
    width: 152px; 
} 

Answer 1

編輯：試試這個：

<div class="container"> 
    <div class="row"> 
     <div class="col-6-md"> 
      <div class="col-md-7"> 
       <div class="row"> 
        <div class="col-xs-1"> 
         <label class="col-md-5">Actual Cycle Start:</label> 
        </div> 
        <div class="col-xs-5"> 
         <input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate" 
            k-format="'MM/dd/yyyy'" disabled /> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-1"> 
         <label class="control-label"> Close:</label> 
        </div> 
        <div class="col-xs-5 changeWdh"> 
         <input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6 fieldHeight"> 
     <label for="challengeOutstand" class="col-xs-5">Challenges 
        Outstanding:</label> 
     <div class="col-xs-7"> 
      <input type="text" class="form-control" id="challengeOutstand" 
         name="challengeOutstand" maxlength="256" 
         ng-model="riskAssessmentDTO.challengesOutstanding" disabled /> 
     </div> 
    </div> 
</div> 

地方您的COL-5和COL-1成排的div或使它們都放入xs，不是一個md和一個xs，並將它們放入一個div容器類「col-md-6」