logo标签列表

如何使标签和文本框在不同屏幕尺寸下对齐

htmlangularjs
9

这是我目前完成的部分。我试图让标签与文本框对齐，同时使文本框相互对齐，同时在不同的屏幕上进行更改。我可以让它在大屏幕上对齐，但在使用较小屏幕时无法对齐。谢谢您的帮助。

<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>
4个回答
1
如果您已经使用了col-xs-6，那么您不必再使用col-md-6。应用的类会扩展到所有更大的屏幕尺寸（除非被覆盖）。
0
0

除了使用 col-md-6，还要在较小的设备上使用 col-md-6 col-sm-* ，在移动设备上使用 col-md-6 col-xs-* 或者在所有设备上使用 col-md-6 col-sm-* col-xs-*。这样可以使它们在不同宽度的设备上以正确的方式对齐。

-1

' '

使用Bootstrap，尺寸选择器将根据屏幕宽度而改变。因此，请将类设置为"class="col-md-6 col-xs-6""。

每一行中的列都应该加起来等于12，所以在最后一个有三列的部分，将宽度从6改为4，或者给第三个单独的一行，宽度为12，“col-md-12”，这将使布局更可靠。 - Richard Maltby
2
如果您已经使用了 col-xs-6，则不必再使用 col-md-6。应用的类会扩展到所有更大的屏幕尺寸（除非被覆盖）。 - Egan Wolf
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接