Come allineare le etichette e le texbox per le diverse dimensioni dello schermo

Question

Here is what I have so far Sto cercando di mantenere le etichette allineate con le caselle di testo e anche le caselle di testo da allineare tra loro cambiando contemporaneamente le diverse schermate. Posso farlo allineare con lo schermo grande ma non quando si usa uno schermo più piccolo. Grazie per l'aiuto.

<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

''

Con bootstrap selettore del formato cambierà in base alla larghezza dello schermo. Quindi rendi la classe "class =" col-md-6 col-xs-6 ""

Answer 2

Il sistema di griglia Bootstrap contiene classi predefinite che coprono numerose dimensioni dello schermo.

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

Answer 3

consultato col-md-6 fare uso di col-md-6 col-sm-* per i dispositivi samller e col-md-6 col-xs-* per i dispositivi mobili o col-md-6 col-sm-* col-xs-* per tutti i dispositivi. In questo modo è possibile allinearli in modo appropriato per dispositivi con diverse larghezze.

Answer 4

Non è necessario utilizzare col-md-6 se si dispone già di col-xs-6. La classe applicata si espande a tutte le dimensioni dello schermo più grandi (se non sovrascritte).