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

如果您已经拥有col-xs-6，则不必使用col-md-6。应用类扩展到所有更大的屏幕尺寸（如果没有覆盖）。

Answer 2

Bootstrap网格系统包含涵盖多种屏幕尺寸的预定义类。

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

Answer 3

与col-md-6一起使用col-md-6 col-sm-*用于samller设备，col-md-6 col-xs-*用于移动设备，col-md-6 col-sm-* col-xs-*用于所有设备。这样，您可以以适当的方式为不同宽度的设备对齐它们。

Answer 4

＆＃39; ＆＃39;

使用bootstrap，大小选择器将根据屏幕宽度发生变化。所以上课＃34; class =＆＃34; col-md-6 col-xs-6＆＃34;＆＃34;

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

4 个答案: