मैं एक एप्लिकेशन विकसित करने के लिए कोणीय और बूटस्ट्रैप का उपयोग कर रहा हूं। मेरे पास लेआउट के संबंध में कुछ समस्याएं हैं। उदाहरण के लिए मेरे पास नेवबार के लिए एक घटक है:

Navbar.component.html

<div class="d-flex">
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top heigh">
    .... // navbar items, etc. 
  </nav>
</div>

App.componenent.html

<app-navbar></app-navbar>

मैंने एक और घटक बनाया। उस घटक में अब तक मेरे पास नेवबार है क्योंकि यह app.component द्वारा लागू किया जाता है। इसके अलावा, मैंने घटक में एक डी-फ्लेक्स कंटेनर जोड़ा:

<div class="d-flex"> My text </div>

मुझे समझ में नहीं आता कि यह div नावबार के पीछे क्यों है? मैं पाठ केवल तभी देख सकता हूं जब मैं कुछ मार्जिन जोड़ूं... मैंने सोचा कि इन दो डी-फ्लेक्स कंटेनरों को एक के नीचे एक प्रदर्शित करना चाहिए। क्या आप कृपया मुझे बता सकते हैं कि मैं क्या कर सकता हूँ?

0
abc 5 मार्च 2020, 15:51

2 जवाब

"मेरा टेक्स्ट" आपके नावबार के पीछे है क्योंकि आपकी नौसेना में fixed-top वर्ग है। आपको अपने नेवबार के लिए ऊंचाई निर्धारित करनी होगी और फिर अपने टेक्स्ट के साथ डिव में पैडिंग जोड़नी होगी:

Navbar.component.html

<div class="d-flex">
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top heigh" style="height: 50px">
    .... // navbar items, etc. 
  </nav>
</div>

दूसरे घटक में div

<div class="d-flex" style="padding-top: 50px"> My text </div>
1
Salvatore Maruccio 5 मार्च 2020, 17:12

यह वास्तव में टाइपस्क्रिप्ट के साथ कोई समस्या नहीं है, यह वास्तव में सिर्फ एक सीएसएस मुद्दा है, और ऐसा इसलिए होता है क्योंकि आपके .navbar में .fixed-top वर्ग है।

यह आपके नावबार को position: fixed; top: 0 पर सेट करता है, आपके DOM पर वह सब कुछ जिसमें position: fixed या position: absolute है, को नियमित दस्तावेज़ प्रवाह से बाहर कर दिया जाता है, इसलिए अन्य आइटम जो स्थिर रूप से स्थित हैं, उन्हें लेने नहीं जा रहे हैं तत्वों को ध्यान में रखते हुए।

यदि आपको शीर्ष पर तय करने के लिए नेवबार की आवश्यकता है, तो नीचे दिए गए पहले आइटम में बस एक margin-top संपत्ति जोड़ना इसे उस स्थान पर धकेलने के लिए पर्याप्त होगा जहां नेवबार इसे कवर नहीं करता है

.navbar {
  background-color: #eee;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    .... // navbar items, etc.
  </nav>
</div>

<div class="d-flex" style="margin-top:50px;"> My text </div>
0
IvanS95 5 मार्च 2020, 17:21