html - ASP Net Core Angular - 使用 Bootstrap 4 而不是 3(SideMenu)的默认元素

Question

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

来自 ASP.Net Core with Angular 的示例元素有一个我想要的导航栏，但它是用 Bootstrap3 编写的。我尝试过转换它但没有成功，这就是我向您寻求帮助的地方!

使用 Bootstrap 3 的原始代码。如果您安装了 dotnet 核心，则可以使用 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>

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

(移动端的view好像也不行，不过我还没试过，我先尝试让桌面端的view生效)

Answer 1

看来我搜索的时间不够长。我在这里找到了解决方案:http://www.codingflow.net/building-single-page-applications-on-asp-net-core-2-1-with-angular-6-part-2-upgrading-to-bootstrap-4/

其中一个关键的变化是在 css 中

.flex-column {
  width: 100%;
}