दिलचस्प पोस्ट
किसी VARCHAR फ़ील्ड में स्ट्रिंग की घटनाओं की संख्या की गणना करें? कैलेंडर दृश्य शैली बदलें NotifyDataSetChange कस्टम एडेप्टर से काम नहीं कर रहा है Js का उपयोग कर सॉफ्टवेयर संस्करण संख्या की तुलना कैसे करें? (केवल संख्या) पूर्णांक को हजारों के लिए कॉमा के साथ स्ट्रिंग में परिवर्तित करना सी # एक स्टैक अतिप्रवाह अपवाद पकड़ो फ़ंक्शन में बनाए गए किसी चर के संदर्भ वापस करने का कोई तरीका क्या है? .jar फ़ाइल से स्रोत कोड निकालें जावा: बृहदान्त्र (:) ऑपरेटर क्या करता है? एएसपी.नेट एमवीसी में संभावित बग में बदला जा सकता है पोस्ट कैसे भेजें और अनुरोध प्राप्त करें? पायथन में क्लास 'सदस्य चर तक पहुंचना? 2 जेसन ऑब्जेक्ट्स की तुलना करें जावा का उपयोग करके ईमेल भेजें अंगुल्य 2 अपवाद: 'रूटर लिंक' से बाध्य नहीं किया जा सकता क्योंकि यह ज्ञात देशी संपत्ति नहीं है

क्षैतिज स्क्रॉलबार के बिना बूटस्ट्रैप 3 द्रव लेआउट कैसे बनाया जाए

यहां नमूना लिंक है: http://bootply.com/76369

यह html है मैं इसका इस्तेमाल करता हूँ

<div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> 

बूटस्ट्रैप 3 में कोई कंटेनर-फ्लूइड और पंक्ति-तरल पदार्थ नहीं है।

मैं इसे कंपाइलर वर्ग के साथ लपेट नहीं सकता क्योंकि यह निश्चित लेआउट बन जाएगा।

यह कैसे तरल पदार्थ (पूर्ण पृष्ठ चौड़ाई) लेआउट बनाने के लिए? ( क्षैतिज स्क्रॉलबार के बिना )

इन मार्कअप के साथ जब आप परिणाम में देखते हैं, तो एक्स-स्क्रॉल पट्टी दिखाई दे रही है, ताकि आप बाएं और दाईं ओर स्क्रॉल कर सकें कि यह नहीं होना चाहिए।


संपादित: 2015-12-09
पहले से ही उत्तर मिला है और बूटस्ट्रैप ने पहले ही 3.1.0 के बाद से फिक्स जारी किया है

वेब के समाधान से एकत्रित समाधान "क्षैतिज स्क्रॉलबार के बिना बूटस्ट्रैप 3 द्रव लेआउट कैसे बनाया जाए"

यह v3.1.0 में प्रस्तुत किया गया था: http://getbootstrap.com/css/#grid-example-fluid

कमेट # 62736046 "पूर्ण-चौड़ा कंटेनर और लेआउट के लिए कंटेनर-तरल पदार्थ भिन्नता" जोड़ा गया।

मेरे पास यह भी है और इसे ठीक करने के लिए उन पर इंतजार करते समय, मैंने इस शर्म सीआरएस को जोड़ा:

body { overflow-x: hidden;}

यह एक भयानक विकल्प है, लेकिन यह काम करता है। जब मैं समस्या को ठीक कर दूँगा तो इसे दूर करने में मुझे खुशी होगी

एक अन्य विकल्प, जैसा कि इस मुद्दे में बताया गया है, ओवरराइड करना है .row :

 .row { margin-left: 0px; margin-right: 0px; } 

यह बीएस 3 में एक ज्ञात मुद्दा है – https://github.com/twbs/bootstrap/issues/9862?source=cc

मैंने नवीनतम बिल्ड का उपयोग करके बूट पर परीक्षण किया है, इसलिए नवीनतम अपडेट / फ़िक्स के लिए GitHub को देखें।

अद्यतन करें

यह एक गैर-मुद्दा है बूटस्ट्रैप 3। .row को किसी नकारात्मक हाशिए से निपटने के लिए। .row या। .container-fluid अंदर उपयोग किया जाना चाहिए। यह क्षैतिज स्क्रॉलबार को समाप्त करेगा

डॉक्स से …

पंक्तियों को सही संरेखण और पैडिंग के लिए। कंटेनर (निश्चित चौड़ाई) या। कंटेनर-द्रव (पूर्ण-चौड़ाई) के भीतर रखा जाना चाहिए।

अगर मैं आपको सही ढंग से समझता हूं, किसी भी मीडिया प्रश्नों के बाद यह डिफ़ॉल्ट ग्रीड्स पर चौड़ाई प्रतिबंधों को ओवरराइड करता है बूटस्ट्रैप 3 पर मेरे लिए काम करता है जहां मुझे 100% चौड़ाई वाला लेआउट चाहिए

 .container { max-width: 100%; /* This will remove the outer padding, and push content edge to edge */ padding-right: 0; padding-left: 0; } 

फिर आप कंटेनर के अंदर अपनी पंक्ति और ग्रिड तत्व डाल सकते हैं।

2014 से अपडेट, बूटस्ट्रैप डॉक्स से:

ग्रिड और पूर्ण-चौड़ाई वाला लेआउट फ़्लाक्स पूरी तरह से तरल पदार्थ लेआउट (जिसका अर्थ है कि आपकी साइट ने व्यूपोर्ट की पूरी चौड़ाई फैलाई) बनाने की तलाश कर रहे हैं, उनकी ग्रिड सामग्री को पैडिंग के साथ युक्त तत्व में लपेटा जाना चाहिए : 0 15px; मार्जिन ऑफसेट करने के लिए : 0 -15px; पर इस्तेमाल किया।

बस मेरे 2 सेंट यहां हैं अधिकतर यह आपके लिए काम करेगा, जैसा कि मेरे लिए किया था

 body > .row { margin-left: 0px; margin-right: 0px; } 

मैं एक समान समस्या (एक तरल लेआउट) चाहता था पर चल रहा था, लेकिन छोटे स्क्रीन के लिए स्तंभों को दोबारा व्यवस्थित करने के साथ-साथ उत्तरदायी विकल्प रखना चाहती थीं और वे छोटे-छोटे बदलावों के साथ चर के साथ समाप्त हो गए थे।

 // Large screen / wide desktop (last row of file) @container-lg-desktop: 100%; //((1140px + @grid-gutter-width)); 

यह मान grid.less और सेटों में एक बार उपयोग किया जाता है

 @media (min-width: @screen-lg-desktop) { .container { max-width: @container-lg-desktop; } .... } 

नतीजा यह है कि 1200 पीएक्स से अधिक ग्रिड द्रव (क्षैतिज स्क्रॉलबार्स के बिना) है। नीचे सामान्य उत्तरदायी नियम लागू होते हैं। आप निश्चित रूप से इसे अन्य मीडिया प्रश्नों के साथ ही आसानी से सेट कर सकते हैं।

यदि आप संपादन और संकलन नहीं करना चाहते हैं, तो आप खुद को अपने खुद के स्टाइल शीट में नीचे की तरफ अधिकतम चौड़ाई को ओवरराइड कर सकते हैं:

 @media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */ body .container { max-width: 100%; } } 

यह सब मानते हैं कि आप कंटेनर सहित सामान्य बूटस्ट्रैप ग्रिड वाक्यविन्यास का उपयोग करते हैं, जैसे नीचे:

 <div class="container"> <div class="row" > <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> 

उम्मीद है की यह मदद करेगा!

ट्विटर बूटस्ट्रैप के नवीनतम संस्करण में लेआउट डिफ़ॉल्ट रूप से तरल पदार्थ है, इसलिए आपको अपने लेआउट को द्रव के रूप में घोषित करने के लिए अतिरिक्त कक्षाओं की आवश्यकता नहीं है।

आप आगे का उल्लेख कर सकते हैं –

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/

यह मेरे लिए काम किया एफएफ, क्रोम, आईई 11, आईई 10 में परीक्षण किया गया

 .row { width:99.99%; } 

क्षैतिज स्क्रॉलबार प्रकट हो सकता है यदि container-fluid डिवि सीधे body अंदर रखा जाता है।

एक container-fluid संरचना का उपयोग करने का सही तरीका यह है:

 <body> <section> <div class="container-fluid"> <div class="row"> <!-- content goes here --> </div> </div> </section> </body> 

इसलिए, बाहरी डिवा अंदर अपने container-fluid डीआईवी को लपेटकर देखें, जैसे कि <div id="wrap"> या <section> या <article> या <aside> या अन्य विशेष <div> , और प्रेतो! कोई क्षैतिज स्क्रॉलबार नहीं

बूटस्ट्रैप 3 में, तुरंत शरीर के नीचे कॉलम डालकर आपको क्षैतिज स्क्रॉल पट्टी के बिना एक द्रव लेआउट देना चाहिए

 <body> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </body> 

बूटस्ट्रैप 3.0 संस्करण मुश्किल है, वे इस समस्या के लिए ठीक जोड़ देंगे और संभवतः बूटस्ट्रैप 3.1 में कंटेनर-तरल वापस आएंगे। लेकिन तब तक यह तय है कि मैं इसका प्रयोग कर रहा हूं:

पहले, आपको कस्टम कंटेनर की आवश्यकता होगी और इसे 100% चौड़ाई में सेट करना होगा, और फिर आपको पंक्ति मार्जिन स्वभाव को ठीक करना होगा, और आपके पास नौबार भी जरूर है:

 /* Custom container */ .container-full { margin: 0 auto; width: 100%; } /*fix row -15px margin*/ .container-fluid { padding: 0 15px; } /*fix navbar margin*/ .navbar{ margin: 0 -15px; } /*fix navbar-right margin*/ .navbar-nav.navbar-right:last-child { margin-right: 0px; } 

आप रूट डिव पर कंटेनर-पूर्ण और कंटेनर-द्रव वाले वर्गों को ढेर कर सकते हैं, और बाद में आप कंटेनर-द्रव का उपयोग कर सकते हैं

आशा है कि यह मदद करता है, अगर आपको अधिक जानकारी की आवश्यकता है तो मुझे बताएं

इस समाधान मिला

 .row { margin-left: 0; margin-right: 0; } [class^="col-"] > [class^="col-"]:first-child, [class^="col-"] > [class*=" col-"]:first-child [class*=" col-"] > [class^="col-"]:first-child, [class*=" col-"]> [class*=" col-"]:first-child, .row > [class^="col-"]:first-child, .row > [class*=" col-"]:first-child{ padding-left: 0px; } [class^="col-"] > [class^="col-"]:last-child, [class^="col-"] > [class*=" col-"]:last-child [class*=" col-"] > [class^="col-"]:last-child, [class*=" col-"]> [class*=" col-"]:last-child, .row > [class^="col-"]:last-child, .row > [class*=" col-"]:last-child{ padding-right: 0px; } 

इसी से मेरा काम बना है। मैंने दाईं ओर छोटे मार्जिन को निकालने के लिए एक शैली इनलाइन जोड़ा मुझे वास्तव में इनलाइन स्टाइल करना पसंद नहीं है, लेकिन मेरे एचटीएमएल में यह एकमात्र शैली विशेषता मेरे लिए अन्यथा अच्छी तरह से अलग कोड में छिद्रित हैक-नौकरी के बारे में याद रखना आसान बनाता है। यह बूटस्ट्रैप स्टाइलशीट से पहले या बाद में लोड होने वाली मेरी बाहरी शैली की चिंता को भी समाप्त करता है

 <div class="row" style="margin-right:0px;"> <div class="col-md-6"> <div class="col-md-6"> </div> 

शरीर पर लागू करें क्षैतिज स्क्रॉलबार से छुटकारा पा रहा है

 overflow-x: hidden; 

यदि यह किसी के लिए अभी भी वास्तविक है, तो मेरा समाधान निम्नानुसार था:

 .container{ overflow: hidden; overflow-y: auto; } 

यह पहले से ही डिफ़ॉल्ट रूप से द्रव है यदि आप col-md-6 बजाय कम चौड़ाई के लिए तरल पदार्थ बनना चाहते हैं, तो col-sm-6 या col-xs-6

आप बूटस्ट्रैप सीएसएस को परेशान किए बिना इस समस्या को ठीक कर सकते हैं और अगले संस्करण में ठीक होने के लिए प्रतीक्षा कर सकते हैं, ताकि आप अपनी कक्षा को परिभाषित करके अपनी पंक्ति को आसानी से लपेटें। कंटेनर-तरल पदार्थ पैडिंग के साथ।

 //Add this class to your global css file <style> .container-fluid { padding: 0 15px; } </style> //Wrap your rows in within this .container-fluid <div class="container-fluid"> <div class="row"> <div class="col-md-3">content</div> <div class="col-md-9">content</div> <div class="col-md-3">content</div> </div> </div> 

आप अपने शरीर के तत्व के लिए पक्षों पर एक 10px पैडिंग जोड़ सकते हैं यदि यह सब बच्चे हैं तो पंक्तियां हैं

 body { padding: 0 10px; } 

यदि आपका HTML मार्कअप ऐसा कुछ दिखता है:

 <body> <div class="row"></div> <div class="row"></div> <div class="row"></div> </body> 

पंक्तियों में एक 10 px नकारात्मक मार्जिन होता है यही कारण है कि अतिप्रवाह का कारण है यदि आप शरीर में 10px पैडिंग जोड़ते हैं, तो वे एक-दूसरे को रद्द कर देंगे।

मेरी सहायता करने वाली एकमात्र चीज़ margin:0px सेट करना था margin:0px शीर्ष पर <div class="row"> मेरे html DOM में

यह फिर से इस मुद्दे को हल करने का सबसे आकर्षक तरीका नहीं था, लेकिन क्योंकि यह केवल एक ही स्थान पर है, मैं इसे इनलाइन में डाल दिया।

एक कंटेनर-द्रव और स्पष्ट बूटस्ट्रैप फिक्स के रूप में एक फ़्यूईई ने केवल दृश्य पृष्ठ के दोनों तरफ एक बढ़ी हुई सफेद स्थान की शुरुआत की … 🙁 हालांकि मैं गिटौब मुद्दे पर पीछे और पीछे पढ़ने के द्वारा अपने समाधान में आया हूं – बहुत अच्छा रीडिंग।

एक उत्तर में सबसे अधिक प्रासंगिक टिप्पणियों का सारांश:

  • यह ज्ञात बग है
  • वहाँ काम कर रहे हैं लेकिन आपको उनकी आवश्यकता नहीं हो सकती (पढ़ें)
  • ऐसा तब होता है जब तत्व सीधे एक कंटेनर-तरल पदार्थ के अंदर या किसी अन्य डिवा के अंदर, शरीर के अंदर सीधे रखा जाता है। उन्हें सीधे शरीर में रखकर वह वास्तव में क्या होता है जब लोग स्थानीय रूप से सामग्री का परीक्षण करते हैं। एक बार जब आप अपना कोड पूरे पृष्ठ में डाल देते हैं (एक कंटेनर-तरल या अन्य कंटेनर डिवा में) तो आपको इस समस्या का सामना नहीं करना पड़ेगा (कुछ भी बदलने की आवश्यकता नहीं है)।