दिलचस्प पोस्ट
एक सक्रिय रिकॉर्डिंग रिकॉर्ड का डुप्लिकेट सबसे आसान तरीका क्या है? विंडोज 7 पर एसआईपी और पीईएक्टीटी कैसे स्थापित करें I रेल 3 के साथ "थंब्स_प" वोटिंग मणि का उपयोग करने के बारे में स्पष्टीकरण एंड्रॉइड पर अपने माता-पिता के लिए onClick ईवेंट कैसे पास करें? कैसे एक पुनरावर्ती regexp अजगर में लागू किया जा सकता है? स्मार्टी टीपीएल फाइल में PHP कोड का उपयोग करना स्विफ्ट प्रोग्रामिंग भाषा में टेक्स्ट फ़ील्ड के लिए कीबोर्ड छुपाएं पेंट, पेंट कम्पेनेन्ट और पेंट के बीच अंतर स्विंग जीएनयू मेक के साथ सीमके का उपयोग करना: मैं सटीक आदेश कैसे देख सकता हूं? एक कर्ल कॉल के माध्यम से एक HTTP अनुरोध का उपयोग कर हेडर कैसे भेजना है? 1/0 कानूनी जावा अभिव्यक्ति क्या है? ट्रैविस-सीआई को स्थानीय स्तर पर कैसे चलाएं MySQL में प्रकार: बिगइंत (20) बनाम Int (20) कैसे वेक्टर स्तंभों में विभाजित – PySpark का उपयोग कर क्या 'ला' और 'var' के बीच एक अंतर है

फिक्स्ड आवरण के साथ बूटस्ट्रैप ग्रिड – स्टैकिंग से स्तंभ रोकें

जैसा कि शीर्षक बताता है कि मैं एक निश्चित आवरण के साथ बूटस्ट्रैप 3 ग्रिड प्रणाली का उपयोग करने की कोशिश कर रहा हूं। लेकिन जब मैं ब्राउज़र का आकार बदलता हूं, तब कॉलम स्टैक करते हैं, भले ही आवरण एक ही आकार में रहता है?

बीटीडब्लू: मैं 3 संस्करण का उपयोग कर रहा हूं ताकि मैं साइट को पोर्ट किए जाने के बाद उत्तरदायी लेआउट पर जा सकूं। (जो बहुत बड़ा है और मैं अकेला हूं, इसलिए कदम से कदम ही एकमात्र विकल्प है …)

<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> <style> /* Custom container */ .container-fixed { margin: 0 auto; max-width: 800px; min-width: 800px; width: 800px; background-color:#C05659; } .container-fixed > hr { margin: 30px 0; } </style> </head> <body> <div class="container-fixed"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <hr> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://code.jquery.com/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 

Solutions Collecting From Web of "फिक्स्ड आवरण के साथ बूटस्ट्रैप ग्रिड – स्टैकिंग से स्तंभ रोकें"

आप गैर-स्टैकिंग col-xs-* क्लास का उपयोग कर सकते हैं …

 <div class="container"> <div class="row"> <div class="col-xs-4">.col-4</div> <div class="col-xs-4">.col-4</div> <div class="col-xs-4">.col-4</div> </div> </div> 

डेमो: http://bootply.com/80085

संपादित करें: बूटस्ट्रैप 4 , xs अब निर्दिष्ट करने की आवश्यकता नहीं है ..

 <div class="container-fluid"> <div class="row"> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> </div> </div>