Bootstrap Навбар едва показывается - PullRequest
Новая
       7

Bootstrap Навбар едва показывается

0 голосов
/ 02 марта 2020

Итак,

Моя навигационная панель нормально отображается на экране монитора / рабочего стола, но когда я сверну ее в уменьшенном виде (iPhone, iPad, Et c.), Она показывает, но не совсем ... iPhone Вид . Он должен свернуться и превратиться в меню гамбургеров по умолчанию bootstrap функциональность navbar, верно?

Потому что оно хорошо отображало меню гамбургеров во время ранней разработки сайта, но я должен был что-то сделать, чтобы изменить его и я понятия не имею, что я сделал, ха-ха.

Вот код для этого: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
    <title>@ViewData["Title"] - censored</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-dark">
            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="@Url.Action("Index","Home")">
                    <img src="censored" alt="Logo" style="width:135px; height: 40px; border-radius: 8px;">
                </a>

                <ul class="navbar-nav mt-2 mt-lg-0 ">
                    <li class="nav-item active">
                        <a class="navbar-brand" href="censored" target="_blank">
                            <i class="fab fa-censored fa-3x" style="color:#89cff0;"></i>
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav mr-auto mt-2 mt-lg-0 align-middle style">
                    <li class="nav-item active">
                        <a class="navbar-brand">
                            Censored
                        </a>
                    </li>
                </ul>

                <a class="form-inline my-2 my-lg-0" method="post">
                    @if (!User.Identity.IsAuthenticated)
                    {
                        @Html.ActionLink("Log In", "Index", "Account", null, new { @class = "btn btn-outline-info" })
                    }
                    @if (User.Identity.IsAuthenticated)
                    {
                        @using (Html.BeginForm("LogoutAction", "Account", FormMethod.Post))
                        {
                            <button type="submit" value="Log Out" class="btn btn-outline-primary" asp-antiforgery="false">Log Out</button>
                        }
                    }
                </a>

            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

CSS: 

@import url('https://fonts.googleapis.com/css?family=Numans&display=swap');

body {
    background-color: #89cff0;
    font-family: Numans;
}

.style {
    color: white;
    border: 2px white solid;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    padding-left: 10px;
    margin-left: 25%;
}

У меня есть несколько цензурированных соображений, только по соображениям безопасности, но это ничто не должно помешать вам, ребята, помочь.

Есть идеи?

1 Ответ

0 голосов
/ 02 марта 2020

сравните ваш код с bootstrap документацией навигационной панели 

<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarTogglerDemo03">
  <span class="navbar-toggler-icon"></span>
</button>

находится внутри вашего 

<div class="collapse navbar-collapse" id="navbarTogglerDemo03">

Кнопка должна находиться вне этого div, для переключения этого div. Как это: 

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
   <button class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#navbarTogglerDemo03">
     <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse"id="navbarTogglerDemo03">
      <a class="navbar-brand" href="@Url.Action("Index","Home")">
         <img src="censored" alt="Logo" style="width:135px; height: 40px; border-radius: 8px;">
       </a>
...