如何让标签和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。应用类扩展到所有更大的屏幕尺寸（如果不覆盖）。