बूटस्ट्रैप एनवी-गोली

Question

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

सरल शब्दों में हमारी श्रेणियां बाएं तरफ लोगो के ठीक नीचे शुरू होनी चाहिए और सभी छवियों को हमेशा सभी स्क्रीन पर केंद्रित होना चाहिए। अब छवियों के साथ सबमेनू हमेशा बाएं या दाएं स्थानांतरित हो जाता है, मैं सबमेनू में छवियों को हमेशा कंटेनर चौड़ाई लेना चाहता हूं और बाएं और दाएं मार्जिन छोड़कर सभी डेस्कटॉप स्क्रीन के लिए कंटेनर में फिट होना चाहता हूं, और पूरे सबमेनू को पूरी स्क्रीन को कवर करना चाहिए, कृपया इस कोड को देखें संदर्भ के लिए demo मैं एक स्क्रीनशॉट जोड़ रहा हूं कृपया देखें, और देखें कि क्या आप इसके साथ मेरी मदद कर सकते हैं, अपना समय देने के लिए बहुत बहुत धन्यवाद।

यह छवि दिखाती है कि अब मुझे क्या मिल रहा है problem_img यह वही है जो मुझे exact_img है, हालांकि यह सही जगह पर कुछ कम जगह है। लेकिन मुझे ऐसा कुछ चाहिए, सभी सामग्री कंटेनर चौड़ाई में फिट होनी चाहिए और बाएं और दाएं और पृष्ठभूमि काले रंग में एक ही स्थान छोड़ना चाहिए जो पूरे स्क्रीन आकार को कवर करता है। मैंने मार्जिन-बाएं के साथ प्रयास किया लेकिन यह केवल स्क्रीन के लिए फिट बैठता है जिसके लिए मैंने सेट किया है, कृपया इस मेनू को उत्तरदायी बनाने में मेरी सहायता करें। किसी भी मदद सुझाव की सराहना की जाती है। Updated JSFiddle धन्यवाद।

[1]: https://jsfiddle.net/p7qrv3av/ 

Answer 1

https://jsfiddle.net/vinothsdev/p7qrv3av/5/

मैं अपने बेला यहाँ अद्यतन किया है। आपके एचटीएमएल टैग अधिक गड़बड़ दिखते हैं, लेकिन मैंने इसे आपकी आवश्यकता के लिए काम करने के लिए संशोधित किया है।

.top-category-div{ 
background: black; 
    color: white; 
     padding-bottom: 54px; 

}

.container-menu{    
    margin-right: auto; 
margin-left: auto; 
} 
.category-dropdown-menu{ 
margin-left: -300px; 
width: 1280px; 
} 
img{ 
    width:100%; 
} 

Answer 2

मैं अद्यतन किया है यहाँ सीएसएस कृपया प्रयास करें यह

.top-category-div{ 
    background: black; 
     color: white; 
      margin-top: 0px; 
    margin-left: 0; 
    padding-bottom: 54px; 

} 

.main-menu-div .col-sm-5, .main-menu-div .nav > li { position: static; } 
.main-menu-div .dropdown-menu { top:inherit; width:100%; } 
.main-menu-div .top-category-div img { max-width:100px; } 


@media (min-width: 1280px) { 
    .container{ 
     width: 1280px; 
     padding-left: 0; 
     padding-left: 0px; 
     padding-right: 0px; 
     margin-right: auto; 
    margin-left: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    } 

} 

Answer 3

मैं इन वर्ग जोड़ा ->

https://jsfiddle.net/shekharb/p7qrv3av/17/

.label{display:block; width:100%} 
.top-cat-div>li{display:block} 

आपके ओवरराइट करने और उप मेनू से पुल-दाएं वर्ग को हटाने के लिए।