رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مشکل با منو DropDown در بوت استرپ
#1
سلام 
من از یک منوی ترکیبی navbar- inverse بوت استرپ با DropDown برای وب سایتم استفاده کردم ولی با هاش دچار این مشکلات زیر شدم لطفا راهنمایی می فرمایید چه جوریمشکل را حل کنم :

1) اگر فایل bootstrap.rtl.min.js را اضافه کنم قسمت DropDown کلا از کار می افته و وقتی غیرفغالش می کنم درست میشه .چه جوری تنظیمش کنم که با اضافه کردن این فایل منو dropdown از کارنیفته؟
2) وقتی فایل bootstrap.rtl.min.js را غیرفعال می کنم منو dropdown فعال میشه ولی توی حالت ریسپانسیو منوهاش و زیر منوهاش بهم میریزه و نمیشه باهاش کار کردم (شکل زیر) .چه جوری درستش کنم؟


     

این هم سورس کد :
<!DOCTYPE >
<html >
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="images/faveicon.ico"/>
<title>Pasargad Here</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css"  media="all"/>
<link rel="stylesheet" href="css/bootstrap.rtl.min.css" media="all" />
<link rel="stylesheet" href="css/font-awesome.min.css" media="all" />
<link rel="stylesheet" href="css/mainstyle.css" media="all" />
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>-->
<script src="js/jquery-1.12.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/bootstrap.rtl.min.js"></script>-->

</head>

<body>
   <div class="page">
     <nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">اینجا پاسارگاد</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
	     <li id="map-link"><a href="#">گالری</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">درباره ما<span class="caret"></span></a>
            <ul id="submenu " class="dropdown-menu" role="menu">
             <li><a href="#">ایده اولیه</a><li>
			 <li><a href="#">درباره ما</a><li>
			 <li><a href="#">اهداف ما</a><li>
			 <li><a href="#">مجوزها</a><li>
			 <li><a href="#">حرف آخر</a><li>
            </ul>
        </li>
        
        <li id="list-link"><a href="#">تماس باما</a></li>
		<li id="more-link"><a href="#">مجوزها</a></li>
        <li id="locate-link"><a href="#">همکاران</a></li>
        <li id="more-link"><a href="#">ثبت نام</a></li>
		<li id="more-link"><a href="#">ورود</a></li>
      </ul>
    </div>
  </div>
</nav><!-- /#mynavbar -->
       </div><!--/.container-fluid -->
   </nav><!-- /.nav -->
   
     <section class="mycontent"></section><!-- EndOfSection -->
      
     
   </div><!-- /.page -->
 
</body>
</html>

لطفا راهنمایی می کنید.کلافه ام کرده هرچه تلاش می کنم درست نمیشه.
پاسخ
تشکر شده توسط:
#2
فایل مینیفای شده جاوا اسکریپت Bootstrap RTL مشکل داره. فایل معمولی رو لود کنید (bootstrap.rtl.js)
پاسخ
تشکر شده توسط: webdevelopper
#3
سلام
فایل معمولی روی وب گذاشتم (bootstrap.rtl.js) و لود کردم ولی هنوز هر جفت مشکل بالا سر جاش هست و دوباره با همون مشکلات مواجه شدم. الان چه جوری درستش کنم؟
پاسخ
تشکر شده توسط:
#4
بوت استرپ RTL رو از کجا گرفتین؟ اگه از WebDesignerMag گرفته باشین لازم نیست دیگه فایلهای اصلی بوت استرپ رو لود کنید.
پاسخ
تشکر شده توسط:
#5
سلام
بله اقای شهرکی از همین وب سایت که شما می فرمائید دانلود کردم.
پاسخ
تشکر شده توسط:
#6
خوب پس دیگه فایلهای اصلی بوت استرپ رو لود نکنید.
پاسخ
تشکر شده توسط:
#7
نه تمام فایلهای css و js را ازهمین وب سایت دانلود کردم و توی وب گذاشتم و فایلهای اصلی را پاک کردم ولی دوباره کار نمی کنه .همین که bootstrap.rtl.min.js یا bootstrap.rtl.js غیر فعال میشه درست میشه و کارمی کنه ولی با فعال شدن این فایلها از کار میفته .
پاسخ
تشکر شده توسط:
#8
باید کدتون رو از نزدیک بررسی کنم. درصورت امکان ZIP شده اش رو بگذارین فردا چک کنم.
پاسخ
تشکر شده توسط:
#9
این هم فایل zip  منو من  


.zip   DropDown MenuBS.zip (اندازه 1.35 MB / تعداد دانلود: 3)

ممنون
پاسخ
تشکر شده توسط:
#10
سلام آقای شهرکی ببخشید کد من را دیدید؟مشکل از کجاست؟
پاسخ
تشکر شده توسط:
#11
به همین سادگی درست شد:
<!Doctype html>
<html>
<head>
<title>DropDownMenu With BootStrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.rtl.css">
  <style>
     @media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:
     color: #fff;
     background-color: transparent;
  }
}
.dropdown-menu{
  padding:5px;
}
  </style>
</head>
<body>

<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
             <li><a href="#">Menu1</a><li>
			 <li><a href="#">Menu1</a><li>
			 <li><a href="#">menu1</a><li>
            </ul>
        </li>
        <li id="map-link"><a href="#">Search</a></li>
        <li id="list-link"><a href="#">Actions</a></li>
        <li id="locate-link"><a href="#">Locate</a></li>
        <li id="more-link"><a href="#">More</a></li>
      </ul>
    </div>
  </div>
</nav>
  <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>-->
  
  <script src="js/jquery-1.12.0.js"></script>
  <script src="js/bootstrap.rtl.js"></script>

</body>
</html>

هیچوقت JS رو قبل از محتوای صفحه لود نکنید.
پاسخ
تشکر شده توسط: webdevelopper
#12
ممنونم آقای شهرکی .
گذاشته بودم آخر کار فایلهای js را بیارم پایین صفحه ولی یه سوال دیگه :پس اگر مشکل از این هست چرا با لود bootstrap.min.js چنین مشکلی درست نمیشد؟؟!!!
پاسخ
تشکر شده توسط:
#13
چون اون خودش کدها رو داخل $(document).ready(...) گذاشته
پاسخ
تشکر شده توسط: webdevelopper




کاربران در حال بازدید این موضوع: 1 مهمان