无序列表内联垂直对齐和响应间距

Question

我正在尝试为移动设备创建响应式导航栏，但无法正确调整链接容器的大小。我似乎也无法让文本垂直居中。在这两种情况下，我都尝试使用自动填充和边距，但它们似乎没有做任何事情。我正在使用引导程序。

我的问题是：

1. 如何将文本在其容器中垂直居中？
2. 如何让每个链接容器的宽度成为文本的宽度
3. 然后如何使每个容器之间的间距相同，以便它们一起填满屏幕的宽度？

HTML

<div class="container" id="nav-container-mobile">
                <ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
                        <a class="nav-link" href="#Profile">
                            <div class="nav-link-container-mobile">Profile</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
                        <a class="nav-link" href="#Experience">
                                <div class="nav-link-container-mobile">Experience</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
                        <a class="nav-link" href="#Skills">
                                <div class="nav-link-container-mobile">Skills</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
                        <a class="nav-link" href="#project">
                            <div class="nav-link-container-mobile">Projects</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
                        <a class="nav-link" href="#Contact">
                            <div class="nav-link-container-mobile">Contact</div>
                        </a>
                    </li>
                </ul>
            </div>

CSS

#nav-container-mobile {
            position: absolute;
            width: 100%;
            height: 70px;
            padding: 0;
            background: #292929;
            z-index: 5;
        }
        #nav-list-mobile {
            width: 100%;
            height: 100%;
            margin: 0;
            vertical-align: middle;
        }
        .nav-link-horizontal {
            height: 100%;
            width: 15vw;
            min-width: 50px;
        }
        .nav-link-container-mobile {
            padding: auto;
            height: 100%;
            overflow-wrap: break-word;
        }

        .nav-link { 
            color: #aeaeae; 
        }

感谢任何帮助或建议。

JSFiddle

Answer 1

使用 Bootstrap 4 Nav Fill or Justify 会更简单，然后根据需要更改背景颜色和其他样式。

https://www.codeply.com/go/WsWHHIfRlh

<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
    <div class="container-fluid">
        <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Skills</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>

#nav-container-mobile {
  width: 100%;
  height: 70px;
  padding: 0;
  background: #292929;
  z-index: 5;
}

.nav-link { 
  color: #aeaeae; 
}