Как реализовать Меню в MVC 5 - PullRequest
Новая
       31

Как реализовать Меню в MVC 5

0 голосов
/ 14 мая 2018

Был создан проект MVC 5, и вы хотите изменить его меню, для него было изменено значение Bootwatch , меню, которое вы хотите реализовать, является следующим

Menu

Первым делом я изменил общий стиль моего проекта, скачав файл bootstrap.css

Download

и затем я заменил его своим BundleConfig, так как предыдущий у меня был, он изменяет стиль моего проекта, но не включает вышеупомянутую панель навигации

BundleConfig

Чтобы установить нужную навигационную панель, внедрите следующий код в мой _Layout.cshtml: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Muebles Pangal</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-success">
            <a class="navbar-brand" href="#">Muebles Pangal</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Categorias")">Categorias </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Productoes")">Productos </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Ubicacions")">Proveedores </a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
                </form>
            </div>
        </nav>
        </div>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - Sistema Bodega</p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

Но при выполнении моего проекта я обнаружил следующую проблему, мое меню не работает вхороший способ ответа на вызов, это означает, что когда я изменяю (уменьшаю) размер моего браузера и вызываю меню из моего <span class = "navbar- toggler-icon "> </ span>, отображается это сообщение, но оно сразу же снова сворачивается.

Implementation

Так что не беспокойсяk правильно, я пытался решить эту проблему в течение нескольких дней, но у меня не было хороших результатов.Я установил пакеты Bootstrap и Bootstrap.less, кто-нибудь может мне помочь?что происходит?

любая помощь для меня?

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Я считаю, что вам не хватает jQuery.min.js, или он может быть расположен в неправильном порядке в вашей структуре кода. Надеюсь, этот фрагмент поможет !! 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
    <a class="navbar-brand" href="#">Muebles Pangal</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Categorias ")">Categorias </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Productoes ")">Productos </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Ubicacions ")">Proveedores </a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
      </form>
    </div>
  </nav>
0 голосов
/ 14 мая 2018

Можете ли вы проверить свою CSS для следующего: 

.navbar-collapse.collapse {
        display: none!important;
    }

Я могу получить рабочее меню в новом проекте MVC 5, используя то, что вы опубликовали, но у меня нет такого же CSS, как у вас.

Пожалуйста, увидите похожую проблему: Мобильное меню Bootstrap не останется открытым

...