اذهب إلى المحتوى
  • 0

مشكلة عند استخدام الـ dropdown في الـ bootstrap 4

القعقاع بن غزي

السؤال

السلام عليكم ورحمة الله وبركاته

لدي قائمة navbar تحتوي على عناصر وأحد هذه العناصر قائمة منسدلة 

المشكلة هي عند النقر على القائمة المنسدلة محتوى القائمة لا يظهر الا الجزء الموجود داخر الـ navbar فقط وعندما اضعها خارج الـ navbar تظهر بشكل جيد 

الصورة المرفقة توضح كيف تكون القائمة مخفية داخل النافبار

وهذا هو الكود المستخدم

<header>
	<nav>
		<div class="navbar navbar-expand-lg p-0">
			<button class="navbar-toggler bg-dark text-white m-1" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				القائمة
			</button>
			<a class="navbar-brand pl-2" href="#"><img src="css/images/logo.png" alt="logo" style="height:70px;" /></a>
			<div class="collapse navbar-collapse pr-0" id="navbarSupportedContent">
				<ul class="navbar-nav pr-0">
					<li class="nav-item">
						<a href="/" id="home"><i class="fa fa-home" aria-hidden="true"></i>
						<p>الرئيسية</p> <span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item"><a href="activities.php">
						التاء ومسيرة العطاء
						<p>مناشط وفعاليات</p>
					</a></li>
					<li class="nav-item"><a href="articles.php">
						مايسطرون
						<p>مقالات</p>
					</a></li>
					<li class="nav-item"><a href="media.php">
						لنسمو
						<p>مرئيات</p>
					</a></li>
					<li class="nav-item"><a href="#">
						متنفس لنسمعك
						<p>مشاركات ونقاشات</p>
					</a></li>
					<li class="nav-item"><a href="#">
						<i class="fa fa-info" aria-hidden="true"></i>
						<p>من نحن؟</p>
					</a></li>
				</ul>
			</div>
			
		<?php
		if($_SESSION['user_info'] == false){
			echo '
				<ul class="navbar-nav float-left pl-2">
					<li class="nav-item ml-2 d-none d-lg-block"><a id="link" class="nav-link" href="#search" data-toggle="collapse" aria-expanded="true" aria-controls="search"><i class="fa fa-search" aria-hidden="true"></i></a></li>
					<li class="nav-item border border-danger ml-1"><a href="login.php" id="link" class="btn btn-link">دخول</a></li>
					<li class="nav-item border border-danger d-none d-lg-block"><a href="register.php" id="link" class="btn btn-link">تسجيل</a></li>
				</ul>
		
			';
		}else {
			echo '
				<ul class="nav nav-pills float-left pl-2">
					  <li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">'.$_SESSION['user_info']->user_name.'</a>
						<div class="dropdown-menu">
						  <a class="dropdown-item" href="#">Action</a>
						  <a class="dropdown-item" href="#">Another action</a>
						  <a class="dropdown-item" href="#">Something else here</a>
						  <div class="dropdown-divider"></div>
						  <a class="dropdown-item" href="#">Separated link</a>
						</div>
					  </li>
				</ul>
		
			';
		}
		?>
		</div>
	</nav>
	<form>
	  <input type="text" id="search" class="collapse" name="search" placeholder="ابحث عن...">
	</form>
	
</header>

 

9-13-2017 1-40-14 AM.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...