आकार बदलते समय बूटस्ट्रैप कॉलम को उसी पंक्ति में रखें

Question

मेरे पास एक div है जिसमें दो कॉलम हैं - एक में ग्लाइफ़िकॉन होता है, दूसरे में टेक्स्ट होता है। बड़े आकार के आधार पर इस सही ढंग से काम करता है:

लेकिन जब ब्राउज़र एक छोटे चौड़ाई (या मोबाइल) पर है, कॉलम विभाजित है, और यह इस तरह लग रही समाप्त होता है:

क्या कॉलम को एक पंक्ति में एक साथ रहने के लिए मजबूर करने का कोई तरीका है? दोनों स्तंभों के लिए बहुत कम जगह पर भी, कमरे के लिए बहुत सारे कमरे हैं।

यहाँ एक ही पंक्ति के लिए मेरी HTML है:

<div class="row"> 
    <div class="col-md-2"><i class="fa fa-check fa-2x fa-fw"></i></div> 
    <div class="col-md-10"> 
     <p>Zero Day Protection</p> 
    </div> 
</div> 

सीएसएस मानक बूटस्ट्रैप है (i वर्ग एक FontAwesome Glyphicon है)।

Answer 1

class="col-md-2 col-xs-2" और class="col-md-10 col-xs-10"

आप तत्व के लिए कक्षाओं गठजोड़ कर सकते हैं यह स्क्रीन आकार के आधार निश्चित तरीके से व्यवहार करते हैं बनाने के लिए। आप class="col-md-2 col-xs-6" और class="col-md-10 col-xs-6" आदि की तरह कुछ कर सकते हैं ...

Answer 2

col-xs-* ग्रिड वर्गों का प्रयोग करें।

<div class="row"> 
    <div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div> 
    <div class="col-xs-10"> 
     <p>Zero Day Protection</p> 
    </div> 
</div> 

बूटस्ट्रैप ग्रिड में, आपके कॉलम डिफ़ॉल्ट रूप से 100% चौड़े हैं। इसे ओवरराइड करने के लिए col-<size>-<number> कक्षाओं का उपयोग करें। <size> या तो xs, sm, md, या lg हो सकता है, और उस वर्ग के लिए लागू होने वाली न्यूनतम स्क्रीन चौड़ाई को संदर्भित करता है। <number> 1 से 12 तक की संख्या है और आपकी सामग्री के विस्तृत कॉलम की संख्या को संदर्भित करता है।

तो, शायद आपके पास वास्तव में विस्तृत सामग्री है, और इसे केवल डेस्कटॉप ब्राउज़र पर ही प्रदर्शित किया जाना चाहिए। आप अपनी सामग्री class="col-md-6" दे सकते हैं और यह तब तक प्रदर्शित होगा जब तक ब्राउज़र विंडो कम से कम 992 पिक्सल चौड़ी हो।

लेकिन, आपके लिए, क्योंकि आपकी सामग्री वास्तव में छोटी है, आप हमेशा इसे तरफ प्रदर्शित करना चाहते हैं, इसलिए आपको col-xs-<number> कक्षाओं का उपयोग करना चाहिए।

आप यह है कि मोबाइल पर, आप प्रत्येक पंक्ति में एक जोड़ी है, लेकिन गोलियाँ पर आप प्रत्येक पंक्ति में दो है, और डेस्कटॉप पर आप प्रत्येक पंक्ति में 3 है तो कर सकता है:

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Adaptive Updates</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Online Support and Knowledge Base</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Direct Support</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Enterprise Management Console</p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div> 
 
     <div class="col-xs-9 col-sm-4 col-md-3"> 
 
      <p>Zero Day Protection</p> 
 
     </div> 
 
    </div> 
 
</div>

अधिक जानकारी के लिए

bootstrap Grid System documentation देखें।