html - Making list-group full-width - hortizontal scrollbar appears -

मैं अपने list-group एकाधिक कॉलम (बूटस्ट्रैप 3.2.0 )। मैंने निम्न कोड बनाया है:

  & lt; div class = "container" शैली = "पृष्ठभूमि: लाल;" & gt; & Lt; div वर्ग = "पंक्ति" & gt; & Lt; div वर्ग = "सूची-समूह" & gt; & Lt; div वर्ग = "पंक्ति" & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 1 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 2 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 3 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 4 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 5 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 6 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 7 & lt; / a & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; p वर्ग = "पंक्ति अलर्ट चेतावनी-चेतावनी पाठ-केंद्र" & gt; यहां संदेश & lt; / p & gt; & Lt; / div & gt; यहां केवल समस्या यह है कि जब आप अपनी ब्राउज़र विंडो का आकार बदलते हैं, तो छोटे रिज़ॉल्यूशन (शायद एसए) के लिए क्षैतिज स्क्रॉलबार संभवतः सही हाशिया या सही पैडिंग के कारण दिखाई देता है। । ऐसा लगता है कि यह संभवतः  पंक्ति  का उपयोग करने से जुड़ा हुआ है। 
 
 जब मैं बाहरी  .row  div को निकालता हूं तब कोई समस्या नहीं है (कोई क्षैतिज स्क्रॉलबार प्रकट नहीं होता है) लेकिन इस मामले में  सूची समूह  पूर्ण कंटेनर चौड़ाई नहीं लेगा। 
 
 प्रश्न - क्या यह आसान तरीके से हल करना संभव है? ऐसा क्यों होता है? मुझे पता है कि यह शायद बहुत मानक समाधान नहीं है (मैं कई कोडों को अंदर  list-group  डालता है) लेकिन यदि संभव हो तो मैं इसे काम करना चाहूंगा। 
 

आपके पास समस्या यह है कि आप col - * वर्ग गुम हैं। बूटस्ट्रैप के लिए आवश्यक है कि नेस्टेड पंक्तियों को उनके भीतर कॉलम की आवश्यकता होती है जैसे तात्कालिक बच्चे, लेकिन आपकी पदानुक्रम कंटेनर -> पंक्ति -> पंक्ति -> col - * । तो आपको सिर्फ एक col-xs-12 को बीच में, या अधिक बस सम्मिलित करने की आवश्यकता है, उस वर्ग को अपने सूची समूह div में जोड़ें।

  & lt; div वर्ग = "कंटेनर" शैली = "पृष्ठभूमि: लाल;" & gt; & Lt; div वर्ग = "पंक्ति" & gt; & Lt; div वर्ग = "col-xs-12 सूची-समूह" & gt; & Lt; div वर्ग = "पंक्ति" & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 1 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 2 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 3 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 4 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 5 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 6 & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "col-xs-12 col-sm-6 col-md-4 col-lg-3" & gt; & Lt; a href = "" class = "सूची-समूह-आइटम" & gt; आइटम 7 & lt; / a & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; p वर्ग = "पंक्ति अलर्ट चेतावनी-चेतावनी पाठ-केंद्र" & gt; यहां संदेश & lt; / p & gt; & Lt; / div & gt;  

और बूटफ़ोन यहां है: