विभिन्न स्क्रीन आकारों के लिए सही ढंग से संरेखित करने के लिए लेबल और टेक्स्टबॉक्स को कैसे प्राप्त करें

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

''

आकार चयनकर्ता bootstrap के साथ स्क्रीन की चौड़ाई के आधार पर बदल जाएगा। तो कक्षा "वर्ग =" col-md-6 col-xs-6 ""

Answer 2

बूटस्ट्रैप ग्रिड सिस्टम में पूर्वनिर्धारित कक्षाएं हैं जो कई स्क्रीन आकारों को कवर करती हैं।

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

Answer 3

सभी उपकरणों के लिए मोबाइल उपकरणों के लिए samller उपकरणों के लिए col-md-6 col-sm-* और col-md-6 col-xs-* या col-md-6 col-sm-* col-xs-* की col-md-6 मेकअप उपयोग के साथ साथ

। इस तरह आप उन्हें विभिन्न चौड़ाई वाले उपकरणों के लिए उचित तरीके से संरेखित कर सकते हैं।

Answer 4

यदि आपके पास पहले से ही col-xs-6 है तो आपको col-md-6 का उपयोग करने की आवश्यकता नहीं है। एप्लाइड क्लास सभी बड़े स्क्रीन आकारों में फैली हुई है (अगर ओवरराइड नहीं है)।