मेरे पास नीचे नेवबार है, लेकिन अभी, जब मैं ब्राउज़र पर पेज खोलता हूं, तो ul class="navbar-nav mr-auto" के अंदर के आइटम पूरी तरह से प्रदर्शित नहीं होते हैं क्योंकि उन्हें नेवबार-ब्रांड छवि के पीछे रखा जाता है। किसी को पता है कि इसे कैसे ठीक किया जाए?

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand pr-3" href="#">
    <img th:src="@{/img/banner.jpg}" class="d-inline-block align-top pl-3" alt="Kleber App Store">
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse pl-3" id="navbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

इस पृष्ठ के लिए सीएसएस

body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

.navbar-brand img {
  top: 0;
  position: absolute;
}
0
Kleber Mota 4 अप्रैल 2020, 02:28

1 उत्तर

सबसे बढ़िया उत्तर

आप कक्षा को संशोधित कर सकते हैं और आपको अपनी सीएसएस फ़ाइल पर पूर्ण स्थिति की आवश्यकता नहीं है। यह क्रिया आपकी छवि को आपके लेआउट में समायोजित कर देगी, इस पर भरोसा करते हुए कि आप बूटस्ट्रैप के साथ काम कर रहे हैं, मैंने आपका th:src भी हटा दिया है क्योंकि यह आवश्यक नहीं है, नीचे इस कोड की जांच करें।

<img src="@{/img/banner.jpg}" class="d-inline-block align-top pl-3 img-fluid" alt="Kleber App Store">

अपनी कक्षा img-fluid में जोड़कर, आपकी छवि किसी भी स्क्रीन या लेआउट में समायोजित हो जाएगी और केवल वहीं फिट होगी जहां यह है, सुनिश्चित करें कि छवि इतनी बड़ी नहीं है और अपने CSS से स्थिति को हटा दें।

0
Pedro Carvalho 3 अप्रैल 2020, 23:38