Question

编辑9-10-19：我给img标签添加了一个“徽标”类，并将内嵌样式移到了单独的样式表中，导航栏链接仍然不会折叠到切换图标上。

我一直在成功设计引导导航栏，但是由于某种原因，当我减小页面大小时，导航栏链接不会折叠成“切换图标”，它们只会消失。

如果页面太小，我希望导航栏链接消失，但是要替换为可以切换以显示导航栏链接的按钮。

我已经做了很多查找，发现的大多数问题解决方案都涉及确保div ID匹配，我很确定我的这样做，请帮忙！

<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/darkiddlogostandalone.png" height="57px" width="200px"></a>

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

<div class="navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Illustration</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Animation</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
            </li>
    </ul>
</div>
</div>

我只希望链接压缩到右侧的切换按钮中。

Answer 1

可以回答我自己的问题（有点）

我回到了在汉堡切换器工作时制作的该引导程序模板的早期版本，并精心添加了徽标并重新设置了导航栏的样式，因为我发现恢复为旧样式表似乎可以使汉堡包显示上。

我发现使用bootstrap类的样式可能会受到影响，所以我给我的徽标img标签添加了一个“徽标”类，然后进入了样式表和

function searchItem(ctx) {
    const item = ctx.request.body;
    const itemName = item.item;

    return ctx.myPool().query(`SELECT * FROM Items WHERE Item = '${itemName}'`);

}

function createItem(ctx, itemId) {
    const item = ctx.request.body;

    return ctx.myPool().query(`INSERT INTO Items (PackSizeId, ParLevel, Price, InventoryItem, Active, Item, VendorId, itemId) VALUES ('${item.packSize}', '${item.parLevel}', '${item.price}', '${item.inventory}', ${item.active}, '${item.item}', ${item.vendor}, '${itemId}')`);

} 

function createInventory(ctx, itemId) {

    return ctx.myPool().query(`INSERT INTO Inventory (ItemId, Qty) VALUES ('${itemId}', 0)`);

}

module.exports = {
    createItem,
    searchItem,
    createInventory
}

我不知道将徽标保留在导航栏的液体容器的左上方是否过大，我正在观看本教程https://www.youtube.com/watch?v=rgukBRi1CSU&t=594s 尽管很难理解这位先生，但他提到要摆脱bg-light和navbar-light以便使他的navbar变为绿色，我只想使用灰色，所以我删除了bg-light并添加了一个名为“ navback”的类，用它来设置背景颜色的样式... `position: absolute; left: 0px; top: 0px; z-index: -1;`

<nav class="navbar navbar-expand-md navbar-light sticky-top navback">

}`

我的徽标很大，我很难使它可靠地调整大小，所以我将其设置为190x54px，这似乎消除了对其大小进行样式设置的需要，我认为徽标本身就是问题所在，因为无论出于什么原因，我的导航栏和徽标样式都妨碍了导航栏链接折叠到汉堡切换按钮中，但是上述更改似乎可以解决这种情况。

Bootstrap Navbar链接切换器未显示

1 个答案: