materializecss में उत्तरदायी ब्रेडक्रंब कैसे बनाएं?

Question

मैं सामने के अंत के लिए materializecss का उपयोग कर रहा हूं मेरे जेएसपी पृष्ठों में, मैं पेज के शीर्ष पर शो जानकारी के लिए ब्रेडक्रंब का उपयोग कर रहा हूं, यह ठीक काम कर रहा है, लेकिन जब भी मैंने अपने ब्राउज़र को मोबाइल ब्राउज़र या छोटी स्क्रीन पर देखा तो पूरा ब्रेडक्रंब प्रदर्शित नहीं हो रहा है। तो किसी भी सुझाव की प्रतिक्रिया कैसे करें?

<div class="section" style="padding-bottom:0;"> 
      <div class="row"> 
       <nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;"> 
        <a class="breadcrumb" href="<c:url value="/"/>">Home</a> 
        <a class="breadcrumb" href="<c:url value="/${currentCityName}"/>">${currentCity.name}</a> 
        <c:forEach items="${breadCategories}" var="c"> 
         <c:set var="puri"><catalog:CategoryUri category="${c}"/></c:set> 
         <a class="breadcrumb" href="<c:url value="/${currentCityName}${puri}"/>">${c.name}</a> 
        </c:forEach>     
        <a class="breadcrumb" href="javascript:;">${product.name}</a> 
       </nav>     
      </div> 
     </div> 

Answer 1

मैं पूरी तरह से यकीन नहीं है, लेकिन अगर आप

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;">

साथ

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">

की जगह यह काम हो सकता है अंतर L12 s12 हो जाता है। यह छोटे और उच्च पर ब्रेडक्रंब 12 कॉलम देने के लिए भौतिक रूप से बताता है।

Answer 2

l12 to s12 से बदलने के अलावा, आपके पास एक और समस्या है।

आपके ब्रेडक्रंब काटने का कारण truncate वर्ग के कारण है। डिज़ाइन द्वारा, मटेरियलाइज कंटेनर/स्क्रीन के आकार से अधिक किसी भी सामग्री को काट देगा। Materialize Documentation on Helpers

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

Answer 3

आपका ब्रेडक्रम्ब मोबाइल स्क्रीन में बाहर जा रहा है यह आप

<nav class="breadcrumb-nav col s12 truncate" style="height:40px; line-height: 40px;"> 

यहाँ करने के लिए

<nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;"> 

मदद कर सकता है तो आप अपने मोबाइल सीएसएस की जाँच करें और इस एक कोशिश करने की जरूरत reference है कि हो सकता है आपके लिए सहायक बनें

Answer 4

इस कोड को यहाँ संशोधित उदाहरण

है

<nav> 
    <div class="nav-wrapper"> 
     <div class="col s12"> 
     <a href="#!" class="breadcrumb">First</a> 
     <a href="#!" class="breadcrumb">Second</a> 
     <a href="#!" class="breadcrumb">Third</a> 
     </div> 
    </div> 
    </nav> 

Answer 5

आप पाठ में शैली word-wrap: break-word जोड़ सकते हैं, और मुझे लगता है कि यह मेरी राय में ठीक

Answer 6

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

उदा .:

@media only screen and (max-width : 992px) { 
    .breadcrumb-nav { 
     display:none; 
    } 
} 

या आप भी आपके ब्रेडक्रंब का फ़ॉन्ट आकार में कमी कर सकते हैं:

@media only screen and (max-width : 992px) { 
    .breadcrumb-nav { 
     font-size:; 
    } 
}