Question

我有一个ASP.NET Core Aurelia SPA项目，我刚刚从3升级到Bootstrap4。我的导航栏上有多个下拉菜单。我已经将此HTML更改为我认为应该的格式。

<template>
<require from="./navmenu.css"></require>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom p-0">
    <a class="navbar-brand" href="#/home">JobsLedger</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}">
                <a href.bind="route.href" if.bind="!route.settings.nav"><font-awesome-icon icon="${ route.settings.icon }"></font-awesome-icon> ${route.title}</a>

                <a href.bind="route.href" if.bind="route.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
                    <font-awesome-icon icon="${ route.settings.icon }"></font-awesome-icon> ${route.title} <span class="caret"></span> <!--First level menu heading - requires route.settings.nav to exist-->
                </a>

                <ul if.bind="route.settings.nav" class="dropdown-menu">
                    <li repeat.for="menu of route.settings.nav" class="${menu.settings.divider ? 'divider' : 'dropdown-submenu'}">
                        <a href.bind="menu.href" if.bind="!menu.settings.nav"><font-awesome-icon icon="${ menu.settings.icon }"></font-awesome-icon> ${menu.title}</a>

                        <a href.bind="menu.href" if.bind="menu.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
                            <font-awesome-icon icon="${ menu.settings.icon }"></font-awesome-icon> ${menu.title} <span class="caret-right"></span>
                        </a>
                        <ul if.bind="menu.settings.nav" class="dropdown-menu">
                            <li repeat.for="subMenu of menu.settings.nav" class="${subMenu.settings.divider ? 'divider' : 'dropdown-submenu'}">
                                <a href.bind="subMenu.href" if.bind="!subMenu.settings.nav"><font-awesome-icon icon="${ subMenu.settings.icon }"></font-awesome-icon> ${subMenu.title}</a>

                                <a href.bind="subMenu.href" if.bind="subMenu.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
                                    <font-awesome-icon icon="${ subMenu.settings.icon }"></font-awesome-icon> ${subMenu.title} <span class="caret-right"></span>
                                </a>
                                <ul if.bind="subMenu.settings.nav" class="dropdown-menu">
                                    <li repeat.for="lowestSubMenu of subMenu.settings.nav" class="${lowestSubMenu.settings.divider ? 'divider' : 'dropdown-submenu'}">
                                        <a href.bind="lowestSubMenu.href" if.bind="!lowestSubMenu.settings.divider"> <font-awesome-icon icon="${ lowestSubMenu.settings.icon }"></font-awesome-icon> ${lowestSubMenu.title}</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li repeat.for="row of routes" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
                <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>

                <a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                     if.bind="row.settings.nav">
                    ${row.title}
                    <span class="caret"></span>
                </a>

                <ul if.bind="row.settings.nav" class="dropdown-menu">
                    <li repeat.for="menu of row.settings.nav">
                        <a href.bind="menu.href">${menu.title}</a>
                    </li>
                </ul>
            </li>
            <li><a>Welcome ${userName}</a></li>
            <li><a href="#" click.delegate="logout()">Log Out</a></li>
        </ul>
    </div>
</nav>
</template>

一开始，我已经包含了用于工作的css文件：

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

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


.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

.caret-right {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #a3a3a3;
    margin-top: 5px;
    margin-right: -15px;
}

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
    }

通过升级，我现在所有的标题都显示在链接蓝色中，如果我下拉菜单，它将降落到被分配为绝对值的最左边。

这是菜单的图片：

最后，事实是它的温泉和webpack改变了CSS，此外，这里的html类是检查的实际页面的一部分：

如何将颜色更改回普通白色，更重要的是如何使下拉菜单位于下拉菜单下？

更改为Bootrap 4，并且我的导航栏现在显示为蓝色，并且没有任何下拉列表与以前的位置对齐

0 个答案: