如何使标签和texbox正确对齐不同的屏幕尺寸

Question

到目前为止, 我正在尝试保持标签与文本框对齐,文本框也要相互对齐,同时还要更改不同的屏幕.我可以让它与大屏幕对齐,但不是在使用较小的屏幕时.感谢您的帮助.

<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””