Bootstrap导航栏：实现文本与图标旁的居中水平线条

你可以通过Flex布局实现这个效果，利用Bootstrap内置类配合少量自定义样式，就能让水平线和文本、导航栏居中对齐。修改后的完整代码如下：

<div class="container-fluid">
    <div class="row align-items-center"> <!-- 让整行内容垂直居中 -->
        <div class="col-4">
            <ul class="nav justify-content-left">
                <li class="nav-item">
                    <a href="#" class="nav-link" aria-current="page">
                        <i class="fas fa-home" style="color: #000000;"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">
                        <i class="fas fa-user" style="color: #0d0d0d;"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#portfolio" class="nav-link">
                        <i class="fas fa-th-large" style="color: #000000;"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#contacts" class="nav-link">
                        <i class="fas fa-comment-alt" style="color: #000000;"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-8">
            <!-- 用flex容器包裹水平线和文本，实现居中对齐 -->
            <div class="d-flex align-items-center justify-content-end">
                <div style="flex-grow: 1; height: 1px; background-color: #000; margin-right: 1rem;"></div>
                <h5> &lt; / Front-End Web Developer &gt; </h5>
            </div>
        </div>
    </div>
</div>

关键修改说明： #

• 给row添加align-items-center类：让左侧导航栏和右侧的文本、水平线在垂直方向上居中对齐，保证整体视觉统一。
• 右侧使用d-flex align-items-center justify-content-end容器：这个flex容器让内部的水平线和文本垂直居中，同时整体靠右对齐。
• 水平线的自定义样式：flex-grow:1让它自动填充文本左侧的剩余空间，height:1px设置线条粗细，margin-right:1rem给线条和文本之间留出间距，避免拥挤。

你可以根据需要调整线条的颜色（修改background-color）、粗细（修改height）和间距（修改margin-right），适配你的作品集风格。

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