#asp.net #twitter-bootstrap #drop-down-menu #navbar
#asp.net #twitter-bootstrap #выпадающее меню #панель навигации
Вопрос:
Я пытаюсь реализовать панель навигации boostrap с выпадающим списком в asp.net . Кажется, все работает, выглядит красиво, но проблема с выпадающим списком, вместо того, чтобы идти вниз, как обычно, мой список перемещается вправо при нажатии кнопки. Как показано на рисунке, текст подключения должен выпадать
Вот мой пример кода
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="index.css" rel="stylesheet" />
<link href="Styles.css" rel="stylesheet" type="text/css" />
<title>Dokumentløsning</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
<form id="form1" runat="server">
<h1 runat="server"></h1>
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tools <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Connect via mail</a></li>
<li><a href="#">Scan a file</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Setup</a></li>
<li><a href="#" >Log out</a></li>
</ul>
</div><!-- /.navbar-collapse -->
Я получил все ссылки начальной загрузки в своем проекте и все равно не заставил его работать
Может ли проблема быть в таблице gridview прямо под навигационной панелью или в том, что я что-то перепутал со сценариями
Большое вам спасибо!
Комментарии:
1. Проверьте порядок скриптов jQuery и Bootstrap Js.
JQuery should be always on top of Bootstrap script.2. <script src=» ajax.googleapis.com/ajax/libs/jquery/1.12.4/… > <script src=» Scripts=»» jquery-3.1.1.js»=»»></script> <script src=»Scripts/bootstrap.js»></script> this is the order of my scripts
3. Не включайте несколько сценариев Jquery, попробуйте удалить любой из них.
4. Тем не менее, я не выполнил задание, мне интересно, загрузил ли я правильные пакеты начальной загрузки и добавил их в нужное место в проекте, и если ссылка на них верна, кажется, что инструкции правильные, потому что дизайн работает, но функциональность не работает.
5. Отладьте в браузере и проверьте, загружаются ли все ресурсы в DOM или нет