如何讓標籤和texboxes正確對齊不同的屏幕尺寸

Question

Here is what I have so far 我試圖保持標籤與文本框對齊，也使文本框與對方對齊，同時還改變不同的屏幕。我可以將它與大屏幕對齊，但不能在使用較小屏幕時使用。感謝您的幫助。

<span class="visible-xs">XS</span> 
<span class="visible-sm">SM</span> 
<span class="visible-md">MD</span> 
<span class="visible-lg">LG</span> 

<div class="panel panel-primary"> 
    <div class="panel-heading text-center"> 
     <h2>Review of Vital Info</h2> 
    </div> 
</div> 

<form class="form-horizontal"> 
    <div class="row"> 
     <div class="col-md-6"> <label>Physician:</label> <input type="text" size="12" ng-model="data.physician"/></div> 
     <div class="col-md-6"> <label>Patient Name:</label> 
     <input type="text" size="15" ng-model="data.m0040a"/> <input type="text" size="3" ng-model="data.m0040b"/> <input type="text" size="15" ng-model="data.m0040c"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>DOB:</label> <input type="text" size="12" ng-model="data.datem0066"/></div> 
     <div class="col-md-6"> <label>Episode Timing:</label> <input type="text" size="12" ng-model="data.m0110"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>Sex:</label> <input type="text" size="12" ng-model="data.sex"/></div> 
     <div class="col-md-6"> <label>RFA:</label> <input type="text" size="12" ng-model="data.m0100"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>Race:</label> <input type="text" size="12" ng-model="data.pt_race"/></div> 
     <div class="col-md-6"> <label>Discipline blah:</label> <input type="text" size="12" ng-model="data.discipline"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>Payer:</label> <input type="text" size="12" ng-model="data.payer"/></div> 
     <div class="col-md-6"> <label>SOC Date:</label> <input type="text" size="12" ng-model="data.datem0030"/></div> 
    </div> 
    <div class="row"> 
     <label class="col-md-6">ID Verified: <input type="checkbox" ng-model="checkboxModel.verified_id"> </label> 
     <div class="col-md-6"> <label>Referral Date:</label> <input type="text" size="12" ng-model="data.datem0104"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>MCD #:</label> <input type="text" size="15" ng-model="data.m0065"/></div> 
     <div class="col-md-6"> <label>M0150 Payer:</label> <input type="text" size="12" ng-model="data.m0150"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>MCR #:</label> <input type="text" size="15" ng-model="data.m0020"/></div> 
     <div class="col-md-6"> <label>Interpreter:</label> <input type="text" size="15" ng-model="data.interpreter"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>SS #:</label> <input type="text" size="15" ng-model="data.m0064"/></div> 
     <div class="col-md-6"> <label>Email:</label> <input type="email" size="20" ng-model="data.email"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>Type OF Residence #:</label> <input type="text" size="12" ng-model="data.residence"/></div> 
     <div class="col-md-6"> <label>Phone:</label> <input type="text" size="15" ng-model="data.patientphone"/> </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>IP foc/date/dx:</label> <input type="text" size="12" ng-model="data.ip"/></div> 
     <div class="col-md-6"> <label>Address:</label> 
    <input type="text" size="30" ng-model="data.patientadd"/> <input type="text" size="5" ng-model="data.patientcity"/> <input type="text" size="10" ng-model="data.m0060"/> </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>TX DX C14:</label> <input type="text" size="12" ng-model="data.tx"/></div> 
     <div class="col-md-6"> <label>Directions:</label> <input type="text" size="12" ng-model="data.directions"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>Last MD Visit:</label> <input type="text" size="12" ng-model="data.last_md"/></div> 
     <div class="col-md-6"> <label>Birth WT:</label> <input type="text" size="12" ng-model="data.weight"/></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> <label>Pharmacy:</label> <input type="text" size="12" ng-model="data.pharmacy"/></div> 
     <div class="col-md-6"> <label>Birth HT:</label> <input type="text" size="12" ng-model="data.height"/></div> 
     <div class="col-md-6"> <label>Weeks Gestational:</label> <input type="text" size="12" ng-model="data.gestational"/></div> 
    </div> 

    <div class="modal-footer"> 
     <button type="button" ng-disabled="submitting" class="btn btn-primary btn-lg" ng-class="{'btn-primary':!submitting,'btn-warning':submitting}" ng-click="submit()"> 
      <span ng-if="!submitting">UPDATE</span> 
      <span ng-if="submitting">UPDATING...</span> 
     </button> 
     <button type="button" ng-disabled="submitting" class="btn btn-default btn-lg" ng-click="cancel()">CANCEL</button> 
    </div> 

</form> 

Answer 1

「」

隨着自舉尺寸選擇器將改變基於屏幕的寬度。因此，使類「class =」col-md-6 col-xs-6「」

Answer 2

Bootstrap網格系統包含預定義的類，其中涵蓋了大量的屏幕尺寸。

http://getbootstrap.com/css/#grid

Answer 3

隨着col-md-6化妝用的col-md-6 col-sm-*爲花冤枉錢的設備和col-md-6 col-xs-*爲移動設備或col-md-6 col-sm-* col-xs-*所有設備。通過這種方式，您可以以適當的方式對齊寬度不同的設備。

Answer 4

如果您已經有col-xs-6，則不必使用col-md-6。應用類擴展到所有更大的屏幕尺寸（如果不覆蓋）。