Bootstrap 4导航栏元素自定义对齐问题求助

嘿，别慌！新手刚碰Bootstrap遇到导航栏定制问题太正常了，我这就帮你把三个需求都搞定，全是Bootstrap 4.1里能实现的，咱们直接上干货：

Bootstrap的导航链接默认有一套样式，咱们直接用自定义CSS覆盖就行，比如你想改颜色、hover效果、字体大小啥的，给你个示例：

/* 展开状态下的导航链接样式 */
.navbar-nav .nav-link {
    color: #2c3e50; /* 自定义文字颜色 */
    font-weight: 500;
    padding: 0.75rem 1.5rem; /* 调整内边距 */
}

.navbar-nav .nav-link:hover {
    color: #3498db; /* hover时的颜色 */
    background-color: rgba(52, 152, 219, 0.1); /* 可选的hover背景 */
}

/* 如果想给当前激活的链接加样式 */
.navbar-nav .nav-item.active .nav-link {
    color: #3498db;
    border-bottom: 2px solid #3498db;
}

把这段CSS放在你的样式文件里，就能覆盖默认样式了，你可以根据自己的需求调整数值。

这里分两种常见情况，你按需选：

情况1：自定义折叠触发的汉堡按钮 #

默认的汉堡按钮是三条杠，你可以改成文字或者其他图标，比如：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span>展开菜单</span> <!-- 把默认的icon换成文字 -->
</button>

要是你想用自定义图标，直接把<span>里的内容换成图标代码就行（比如Font Awesome的图标，记得提前引入图标库）。

情况2：折叠状态下额外显示独立按钮 #

如果你想在小屏幕（导航栏折叠时）右侧放一个独立按钮（比如“登录”），可以用Bootstrap的响应式类d-lg-none，让它只在大屏幕隐藏、小屏幕显示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">MyBrand</a>
    <!-- 折叠触发按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 小屏幕专属右侧按钮 -->
    <div class="d-lg-none ml-auto">
        <button class="btn btn-outline-primary">登录</button>
    </div>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- 导航链接 -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">产品</a>
            </li>
        </ul>
    </div>
</nav>

这里的ml-auto是让按钮靠右对齐，完美适配折叠状态的导航栏右侧布局。

默认折叠后的导航链接是左对齐的，咱们只需要给折叠展开后的导航栏加个居中样式就行，用CSS：

/* 折叠展开时，导航链接居中 */
@media (max-width: 991px) { /* Bootstrap 4.1的lg断点是992px，小于992px时生效 */
    .navbar-collapse.show .navbar-nav {
        justify-content: center;
        width: 100%; /* 让导航栏占满宽度，才能实现居中 */
    }
}

要是你更习惯用文字居中的方式，也可以给.navbar-nav加text-align: center;，不过用justify-content: center是贴合Bootstrap默认Flex布局的更优方式。

完整示例代码 #

把上面的内容整合起来，你就能得到一个满足所有需求的导航栏，直接复制就能用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义Bootstrap导航栏</title>
    <!-- 引入Bootstrap 4.1 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style>
        /* 展开状态下的导航链接样式 */
        .navbar-nav .nav-link {
            color: #2c3e50;
            font-weight: 500;
            padding: 0.75rem 1.5rem;
        }

        .navbar-nav .nav-link:hover {
            color: #3498db;
            background-color: rgba(52, 152, 219, 0.1);
        }

        .navbar-nav .nav-item.active .nav-link {
            color: #3498db;
            border-bottom: 2px solid #3498db;
        }

        /* 折叠展开时居中 */
        @media (max-width: 991px) {
            .navbar-collapse.show .navbar-nav {
                justify-content: center;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">MyBrand</a>
        <!-- 自定义折叠按钮 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span>展开菜单</span>
        </button>

        <!-- 小屏幕右侧按钮 -->
        <div class="d-lg-none ml-auto">
            <button class="btn btn-outline-primary">登录</button>
        </div>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 引入Bootstrap 4.1的JS依赖 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

你可以根据自己的需求修改颜色、文字、按钮样式，要是还有细节想调整，随时说哈！

内容的提问来源于stack exchange，提问作者NewJavaEnthusiast