html - ASP Net Core Angular - 使用 bootstrap 4 而不是 3 (SideMenu) 的默认项目

问题描述

我正在尝试使用 Angular6 构建一个网站，在大屏幕上查看时有一个垂直导航栏，而在移动设备上查看时有一个带有下拉菜单的顶部导航栏。使用 Bootstrap 4。我在网上找到了多个示例，但它们似乎都过于复杂或在没有导航模板的情况下构建。

带有 Angular 的 ASP.Net Core 的示例项目有一个我想要的导航栏，但它是用 Bootstrap3 编写的。我试图转换它但没有成功，这就是我寻求你帮助的地方！

带有 Bootstrap 3 的原始代码。如果您安装了 dotnet core，您可以使用它dotnet new angular -o my-new-app来创建项目。

HTML

<div class='main-nav'>
<div class='navbar navbar-inverse'>
    <div class='navbar-header'>
        <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
            <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' [routerLink]='["/"]'>my_new_app</a>
    </div>
    <div class='clearfix'></div>
    <div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
        <ul class='nav navbar-nav'>
            <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
                <a [routerLink]='["/"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-home'></span> Home
                </a>
            </li>
            <li [routerLinkActive]='["link-active"]'>
                <a [routerLink]='["/counter"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-education'></span> Counter
                </a>
            </li>
            <li [routerLinkActive]='["link-active"]'>
                <a [routerLink]='["/fetch-data"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-th-list'></span> Fetch data
                </a>
            </li>
        </ul>
    </div>
</div>

CSS

li .glyphicon {
    margin-right: 10px;
}

/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
    background-color: #4189C7;
    color: white;
}

/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    /* On small screens, convert the nav menu to a vertical sidebar */
    .main-nav {
        height: 100%;
        width: calc(25% - 20px);
    }
    .navbar {
        border-radius: 0px;
        border-width: 0px;
        height: 100%;
    }
    .navbar-header {
        float: none;
    }
    .navbar-collapse {
        border-top: 1px solid #444;
        padding: 0px;
    }
    .navbar ul {
        float: none;
    }
    .navbar li {
        float: none;
        font-size: 15px;
        margin: 6px;
    }
    .navbar li a {
        padding: 10px 16px;
        border-radius: 4px;
    }
    .navbar a {
        /* If a menu item's text is too long, truncate it */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

这是我转换它的尝试。我为模板使用了 Bootstrap 4 文档

<div class="main-nav">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="navbar-collapse collapse" id="navbarNavAltMarkup">
            <div class="nav flex-column">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>
</div>

问题是标题和导航在同一行，而不是在单独的行上。我怎么能做到这一点？

（移动端的视图好像也不行，不过我还没试过，我正在尝试让桌面视图先行）

标签： htmlcssangulartwitter-bootstrap

html - ASP Net Core Angular - 使用 bootstrap 4 而不是 3 (SideMenu) 的默认项目

问题描述

解决方案

推荐阅读