• 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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

أرسل لي رابط الموقع لأحل لك المشكلة بإذن الله وأريك المشكلة :*

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

عندي نفس المشكل هل من مساعدة لو سمحت

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن