Bootstrap 4头部内容垂直居中与左右对齐问题求助

嘿，刚上手Bootstrap 4遇到布局问题太正常了，我帮你调整下代码就能实现你想要的效果！

先看你原代码的小问题：菜单默认是垂直排列的，而且没用到Bootstrap的导航组件类，所以没法横向展示。我们只需要给菜单加上Bootstrap的导航类，再利用flex布局的特性就能轻松搞定。

修改后的完整代码如下：

<header class="header container-fluid">
    <div class="row d-flex align-items-center justify-content-between">

        <img class="logo" src="./images/logo.png" alt="Example Company" title="Example Company" />

        <ul class="menu nav">
            <li class="nav-item">
                <a class="nav-link" href="{{ url("home") }}">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url("home") }}">About us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url("home") }}">How it works</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url("home") }}">Contact us</a>
            </li>
        </ul>

    </div>
</header>

关键改动说明： #

• 给<ul>添加了nav类：这是Bootstrap导航组件的核心类，能自动把垂直列表转换成横向排列的菜单，同时保留了你自己的menu类，方便后续自定义样式。
• 给每个<li>加nav-item、<a>加nav-link：这是Bootstrap导航的标准结构，确保菜单样式统一，交互正常（比如hover效果、active状态等）。
• 保留了row上的align-items-center和justify-content-between：前者让logo和菜单全程垂直居中，后者直接把两个元素分别推到容器的左右两端，完美匹配你参考图里的布局效果。

如果之后需要调整细节，比如菜单间距、logo大小，直接给自定义类加CSS就行，举个例子：

.logo {
    height: 50px; /* 根据你的需求调整logo尺寸 */
}

.menu .nav-item {
    margin-left: 20px; /* 调整菜单项之间的间距 */
}

这样就能完全实现你想要的效果啦！

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