2017-08-30 20 views
6

ध्वस्त हो गया, मैंने एनजी-बूटस्ट्रैप के v1.0-beta में अद्यतन किया। अब navbar हमेशा ढह गया है। जब मैं मेनू को टॉगल करने के लिए हैमबर्गर पर क्लिक करता हूं, तो यह खुलता है, लेकिन क्षैतिज रूप से सामग्री को लंबवत रूप से प्रदर्शित करता है।Navbar हमेशा

मैंने नीचे नेविगेशन के लिए कोड शामिल किया है। यह पहले जैसा ही है। इस बिंदु पर मैं चिढ़ा नहीं सकता अगर समस्या एनजी-बूटस्ट्रैप, बूटस्ट्रैप 4 या उसके संयोजन के साथ है।

मेरा आदर्श परिणाम मेन्यू के लिए केवल एक बार दिखने के लिए होता है जब स्क्रीन एक निश्चित आकार के नीचे होती है, जैसे पुराने दिनों में।

मैंने Bootstrap4 navbar always collapsed देखा था। मैंने यह प्रश्न खोला है क्योंकि इसमें एनजी-बूटस्ट्रैप शामिल नहीं था।

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top" style="background-color: white"> 
    <button class="navbar-toggler navbar-toggler-right" 
    type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" 
    aria-controls="exCollapsingNavbar2" 
    data-toggle="collapse" 
    aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Vesalius - Bobby's World</a> 
    <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="exCollapsingNavbar2"> 
    <div class="navbar-nav mr-auto"> 
     <a class="nav-item nav-link" routerLink="/provider/portal/" routerLinkActive="active">Schedule</a> 
     <a class="nav-item nav-link" routerLink="/patient/portal/medical-history" routerLinkActive="active">Form Editor</a> 
    </div> 

    <div class="navbar-nav"> 
     <form class="form-inline"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search Patient"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
    </div> 
    </div> 
</nav> 

enter image description here

उत्तर

24

एक navbar-expand* वर्ग अगर आप नेवबार क्षैतिज विस्तार करना चाहते की जरूरत है, अन्यथा यह मोबाइल के लिए चूक/संस्करण ढह गई।

बूटस्ट्रैप 4 बीटा के रूप में, navbar-toggleable-* कक्षाएं navbar-expand-* में बदल गई हैं। आपके मामले में navbar-toggleable-smnavbar-expand-md में बदल जाएगा।

संबंधित मुद्दे